vue技术学习es6 语法学习JavaScript 极简教程 ES6 ES7

ES6基础教程(第三节)——字符的扩展

2019-06-18  本文已影响0人  多平方

es6除了做一些方法的扩展外,还对字符,数值,数组,对象,函数进行了扩展,以下几节将会对这个五个方面进行学习,此节对字符的扩展进行学习。

对于字符的学习主要是模板字符串,标签模板,repeat函数、includes函数,startsWith函数,endsWith函数,String.raw函数这几个新增的方法。

第一个先接触一下模板字符串,以前我们拼接字符串是通过“+”号进行拼接字符与参数的。

例如:

var name = "张三";

var str = "我的姓名是:"+name;

如果使用模板字符串:

var name = "张三";

var str = 我的姓名是:${name};

可以直接通过${},这种模式将参数引入,特别注意的是所用的引号也将变成反向引号了。

这种模板字符串的写法还有几个优势点:

优势一:可以保留换行和空格;

var str=`你好

我现在换行了

我中间 有四个空格`

在打印时候所有的换行和空格都将被保留下来。

优势二:${}内可以进行javascript运算

var num1=10;

var num2=20;

var str=我将会进行计算,求和为:${num1+num2}

打印出来时候将会是30。

标签模板

var name = "张三";

var height = 1.8;

func他叫${name},身高${height}米。;

function func(arr,val1,val2){

console.log(arr); 

//结果:[ "他叫",",身高","米。" ]

console.log(val1); 

//结果:张三

console.log(val2); 

//结果:1.8

}

从上述运行结果可知,标签模板就是标签函数加字符模板组成,标签函数传入的值特点是第一个值为字符模板固定文本内容切成的数组,后面的参数依次就是字符模板的变量值。

es6还对字符添加了一些扩展方法:

repeat函数:此函数是将字符串进行重复;

var str1="我是字符"

var str2=str1.repeat(2)

//结果:我是字符我是字符

includes函数:判断字符串中是否包含某些字符,返回布尔值;

var str="我们是最棒的"

str.includes("棒")

//true

str.includes("我", 2)

//false

说明从第三个字符开始匹配,匹配上了就是true

startsWith( )函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。

var str="我们是最棒的"

str.startsWith("棒")

//false

str.startsWith("棒",6)

//true

endsWith( )函数:判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符。

var str="我们是最棒的"

str.endsWith("棒")

//false

str.endsWith("棒",5)

//true

String.raw()函数:此函数的目的是将字符完整输出,不进行转义

console.log(hello\nworld);

//输出:hello

// wolrd

console.log(String.rawhello\nwolrd);

//输出:hello\nwolrd

字符新增的一些方法解决了js以前版本的一些弊端,增强了js的易用性,好了这一节就到这里,期待与你一起进步。

公众号
上一篇 下一篇

猜你喜欢

热点阅读