es6字符串字符串的扩展(实例讲解)

　　

　　

传统字符串

　　 　　 　　让name="杰克"; 　　让职业=耙缴?//传统字符串拼接 　　让str="他" +名字+”,他是一个“+职业; 　　 　　

es6简洁的字符串拼接

　　 　　 　　让name="杰克"; 　　让职业=耙缴?//模板字符串拼接 　　让str='他是${名称},他是一个${行业}'; 　　 　　

对比两段拼接的代码,模板字符串使得我们不再需要反复使用双引号(或者单引号)了;而是改用反引号标识符('),插入变量的时候也不需要再使用加号(+)了,而是把变量放入${}即可。

　　

　　

<强> 1,可以定义多行字符串

　　

传统的多行字符串写法:
　　

　　 　　 　　str="写> 　　str='写> 　　var=1; 　　var b=2; 　　var str='结果是$ {a + b} ';//进行加法运算结果:结果是3 　　 　　

${}中可以是对象的属性

　　 　　 　　var obj={“a”: 1、“b”: 2}; 　　var str='结果是$ {obj.a + obj.b} ';//对象obj的属性//结果:结果是3。 　　 　　

${}中可以是函数的调用

　　 　　 　　函数fn () { 　　返回3; 　　} 　　var str='结果是$ {fn ()} ';//函数fn的调用,结果:结果是3 　　 　　

　　

这里的模板指的是上面讲的字符串模板,用反引号定义的字符串;而标签,则指的是一个函数,一个专门处理模板字符串的函数。

　　 　　 　　var name="张三”; 　　var高度=1.8; 　　 　　tagFn '他叫${名称},身高${高度}米。';//标签+模板字符串//定义一个函数,作为标签 　　函数tagFn (arr v1、v2) { 　　console.log (arr);//结果:["他叫“,”,身高”、“米”。 　　console.log (v1);//结果:张三 　　console.log (v2);//结果:1.8 　　} 　　之前 　　 　　

以上代码有两处要仔细讲解的,首先是tagFn函数,是我们自定义的一个函数,它有三个参数分别是加勒比海盗,v1、v2。函数tagFn的调用方式跟以往的不太一样,以往我们使用括号()表示函数调用执行,这一次我们在函数名后面直接加上一个模板字符串,如下面的代码:
　　

　　 　　 　　tagFn '他叫${名称},身高${高度}米。’;之前 　　 　　

这样就是标签模板,你可以理解为标签函数+模板字符串,这是一种新的语法规范。

　　

接下来我们继续看函数的3个参数,从代码的打印结果我们看到它们运行后对应的结果,arr的值是一个数组:["他叫“,”,身高”,“米。”),而v1的值是变量名称的值:“张三”,v2的值是变量高度的值:1.8 .

　　

你是否看出规律了:第一个参数arr是数组类型,它是内容是模板字符串中除了${}以外的其他字符,按顺序组成了数组的内容,所以arr的值是(“他叫“,”,身高”,“米。”);第2、3个参数则是模板字符串中对应次序的变量名称和高度的值。

　　

标签模板是ES6给我们带来的一种新语法,它常用来实现过滤用户的非法输入和多语言转换,这里不展开讲解。因为一旦我们掌握了标签模板的用法后,以后就可以好好利用它的这个特性,再根据自己的需求要来实现各种功能了。

　　

　　

重复()函数:将目标字符串重复N次,返回一个新的字符串,不影响目标字符串。

　　 　　 　　var name1="王汉炎”;//目标字符串 　　var name2=name1.repeat (3);//变量name1被重复三次; 　　 　　console.log (name1);//结果:王汉炎 　　 　　console.log (name2);//结果:王汉炎王汉炎王汉炎 　　之前 　　 　　

包括()函数:判断字符串中是否含有指定的子字符串,返回真正的表示含有和假表示未含有第。二个参数选填,表示开始搜索的位置。

　　 　　 　　var name="王汉炎”;//目标字符串 　　name.includes(“炎”);//真的,含有 　　 　　name.includes (“web”);//错误,不含有 　　 　　name.includes(“王”,1);//错误,从第2个字符开始搜索,不含有 　　之前 　　 　　

传统的做法我们可以借助indexOf()函数来实现,如果含有指定的字符串,indexOf()函数就会子字符串首次出现的位置,不含有,则返回1。我们通过返回值是否为1来判断字符串中是否含有指定的子字符串,但是,我们现在可以用包括()函数代替indexOf()函数,因为它的返回值更直观(真或假),况且我们并不关心子字符串出现的位置。

　　

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

es6字符串字符串的扩展(实例讲解)