ES6的字符串模板
字符串模板让我们再也不用拼接变量了,而且支持在模板里有简单计算操作。
字符串模版
先来看一个在ES5下我们的字符串拼接案例:
let bgColor='red';
let divColor = '当前div背景颜色是'+bgColor+'';
console.log(divColor); //当前div背景颜色是red
ES5下必须用 +jspang+ 这样的形式进行拼接,这样很麻烦而且很容易出错。ES6新增了字符串模版,可以很好的解决这个问题。字符串模版不再使用 ‘xxx’ 这样的单引号,而是换成了 xxx 这种形式,也叫连接号。这时我们再引用jspang变量就需要用${jspang}这种形式了,我们对上边的代码进行改造。
let bgColor='red';
let divColor = `当前div背景颜色是${ bgColor }`;
console.log(divColor); //当前div背景颜色是red
注意 :这里涉及两个东西,第一个是模板字符串用${ }来引用变量,第二个是模板字符串用反引号( ` )标识。上面的divColor变量看清楚使用反引号标识的,否则里面的${ bgColor }是无效的
对运算的支持:
let a=1;
let b=2;
let c=`${a+b}`;
console.log(c); // 3
字符串查找
ES6还增加了字符串的查找功能,而且支持中文哦,小伙伴是不是很兴奋。还是拿上边的文字作例子,进行操作。
查找是否存在:
先来看一下ES5的写法,其实这种方法并不实用,给我们的索引位置,我们自己还要确定位置。
let a = '红色';
let b = '这里有红色、蓝色、黑色、绿色';
console.log(b.indexOf(a)); // 3
这是控制台中输出了3,我们还要自己判断。
ES6直接用includes就可以判断,不再返回索引值,这样的结果我们更喜欢,更直接。
let a = '红色';
let b = '这里有红色、蓝色、黑色、绿色';
console.log(b.includes(a)); // true
判断开头是否存在:
console.log(b.startsWith(a)); // false
判断结尾是否存在:
console.log(b.endsWith(a)); // false
需要注意的是:starts和ends 后边都要加s。
复制字符串
我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。
let a = '红色';
document.write(a.repeat(3)); // 红色红色红色
还有两个不全字符串的方法,分别是padStart()和padEnd()两个参数:补全之后字符串的长度、补充的字符。这两个不常用这里就
不讲了,有需要的可以去搜一下。