ES6 第五节 字符串模板

ES6 第五节 字符串模板

---

目录

• ES6 第五节 字符串模板
  • 第五节 字符串模板
    • 字符串模板
      • 对运算的支持
    • 字符串查找
      • 查找是否存在：
      • 判断开头是否存在：
      • 判断结尾是否存在：
    • 复制字符串

第五节 字符串模板

ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

字符串模板

先来看一个在ES5下我们的字符串拼接案例：

let da0sy='黛西';
let blog = '很高兴遇见你，我是你的老朋友'+da0sy+'。这节课我们学习字符串模版。';
document.write(blog);

ES5下必须用+da0sy+这样的形式进行拼接，这样很麻烦而且很容易出错。
ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号，而是换成了xxx这种形式，也叫连接号。这时我们再引用da0sy变量就需要用${da0sy}这种形式了，我们对上边的代码进行改造:

let da0sy='黛西';
let blog = `很高兴遇见你，我是你的老朋友${da0sy}。这节课我们学习字符串模版。`;
document.write(blog);

可以看到浏览器出现了和上边代码一样的结果。
而且这里面支持html标签，可以试着输入一些：

let da0sy='黛西';
let blog = `很高兴遇见你，我是你的老朋友${da0sy}。<br/>这节课我们学习字符串模版。`;
document.write(blog);

对运算的支持

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

页面输出为3.
强大的字符串模版，在实际开发中，我们可以让后台写一个活动页面，然后轻松的输出给用户。

字符串查找

ES6还增加了字符串的查找功能，而且支持中文。

查找是否存在：

先来看一下ES5的写法，其实这种方法并不实用，给我们的索引位置，我们自己还要确定位置。

let da0sy = '黛西';
let blog = '很高兴遇见你，我是你的老朋友黛西。这节课我们学习字符串模版。';
document.write(blog.indexOf(da0sy));

网页中输出了14，我们还要自己判断。

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

let da0sy = '黛西';
let blog = '很高兴遇见你，我是你的老朋友黛西。这节课我们学习字符串模版。';
document.write(blog.includes(da0sy));

网页输出true，说明这句话里有黛西。

判断开头是否存在：

blog.startsWith(da0sy);

判断结尾是否存在：

blog.endsWith(da0sy);

复制字符串

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

document.write('da0sy|'.repeat(3));

网页输出：da0sy|da0sy|da0sy|

ES6对字符串还有一些其它操作，自行查询。