ES6系列_5之字符串模版

时间:2021-06-18 05:26:42

1.字符串模板对比引入:

(1)之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的:

var restult= "姓名: <b>"+person.name+"</b>"

但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

(2)于是ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来。上面的例子可以用模版字符串写成下面这样:

·姓名: <b>${person.name}</b>·

这样的做法就简洁了很多,我们不需要再使用大量的""和+来拼接字符串和变量。

注意:如果使用模版字符串表示多行字符串,所有的空格和缩进都会被保存在输出中!!

console.log( `i,
love
you.`);

输出结果为:

ES6系列_5之字符串模版

2.对运算的支持:

在${}中的大括号里可以放入任意的JavaScript表达式,还可以进行运算,以及引用对象属性。

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

输出结果为3。

3.字符串查找

(1)查找是否存在

ES6直接用includes就可以判断,不再返回索引值。

let name="小明";
let listName="小明,小红,小张";
document.write(listName.includes(name))

结果返回:true

(2)判断开头是否存在

listName.startsWith(name)

(3)判断结尾是否存在

listName.endsWith(name)

(4)复制字符串

我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。

document.write('*'.repeat(20));

结果为:********************。

未完,待续。。。。