新特性-模板字符串:
传统的字符串拼接:
var name="老沙";
var age=200;
var str="唐僧的徒弟+name+'现在已经'+age+‘了’";
这种写法也没什么不好的,只是有很多引号 和加好,来看一下新特性写法
var name="老沙";
var age=200;
var str=`唐僧的徒弟${name}现在已经${age}了`
可以看到新的写法没有用到引号,而是把变量放到${}里面即可;
使用时要注意的一些地方:
1,可以定义多行字符串;
传统写法:
var str ="hello my baby,"+
"i love you";
输出:
hello my baby,i love you
模板字符串的写法:
var str=`hello my baby,
i love you`;
输出:
hello my baby,
i love you//显示2行
可以看出,新写法会保留字符串里的缩进和空格
2,${}里面可以放任何的JavaScript表达式;
var a=10;
var b=20;
var c=`合计:${a*b}`; //合计:200
3,${}里面可以是对象的属性;
var obj={"a":1,"b":2};
var num=`合计:${obj.a+obj.b} //合计:3
4,${}里面可以是函数的调用;
function demo(){return 3};
let str=`result is ${demo()}`;
新特性-标签模板;
这里的模板指的是上面讲的字符串模板,用反引号定义的字符串;而标签,则指的是一个函数,一个专门处理模板字符串的函数。
var name = "张三";
var height = 1.8; tagFn`他叫${name},身高${height}米。`; //标签+模板字符串 //定义一个函数,作为标签
function tagFn(arr,v1,v2){
console.log(arr);
//结果:[ "他叫",",身高","米。" ]
console.log(v1);
//结果:张三
console.log(v2);
//结果:1.8
}
以上代码有两处要仔细讲解的,首先是tagFn函数,是我们自定义的一个函数,它有三个参数分别是arr,v1,v2。
函数tagFn的调用方式跟以往的不太一样,以往我们使用括号( )表示函数调用执行,
这一次我们在函数名后面直接加上一个模板字符串,如下面的代码:
tagFn`他叫${name},身高${height}米。`; 这样就是标签模板,你可以理解为标签函数+模板字符串,这是一种新的语法规范。 接下来我们继续看函数的3个参数,从代码的打印结果我们看到它们运行后对应的结果,arr的值是一个数组:[ "他叫" , ",身高" , "米。" ],
而v1的值是变量name的值:“张三”,v2的值是变量height的值:1.8。
你是否看出规律了:第一个参数arr是数组类型,它是内容是模板字符串中除了${ }以外的其他字符,按顺序组成了数组的内容,所以arr的值是[ "他叫", ",身高" , "米。" ];
第2,3个参数则是模板字符串中对应次序的变量name和height的值
新特性-repeat函数
repeat()函数,将目标字符串重复n次,返回一个新的字符串,不影响目标字符串;
var name="老沙"
var name1=name.repeat(3);
console.log(name) //老沙
console.log(name1) //老沙老沙老沙
新特性-includes()函数
判断字符串中是否含有指定子字符串,返回true表示有,返回false 表示没有,第二个参数选填,表示开始搜索的位置,默认是0;
var str="孙悟空";
str.includes("空") //true
str.includes("爱") //false
str.includes("孙",1) //false 从第二个字符开始搜索,没有搜到,所以是false;
新特性-startsWith()函数
startsWith( )函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。
var name = "abc"; //目标字符串 name.startsWith('a');
//true,出现在开头位置 name.startsWith('b');
//false,不是在开头位置 name.startsWith('b',1);
//true,从第2个字符开始
新特性-endsWith()函数
判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符
var name = "我就是孙悟空"; //目标字符串 name.endsWith('我');
//false,不在尾部位置
name.endsWith('空');
//true,在尾部位置
name.endsWith('空',5);
//false,只针对前5个字符
name.endsWith('空',6);
//true,针对前6个字符
新特性-codePointAt函数
javascript中,一个字符固定为2个字节,对于那些需要4个字节存储的字符,javascript会认为它是两个字符,此时它的字符长度length为2。如字符:"
