ES6中的字符串模版

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

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴'+name+'。这节课我们学习字符串模版。';
document.write(blog);
</script>

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

<script>
let name='OSganping';
let blog = `非常高兴你能看到这篇文章,我是你的小伙伴${name}。这节课我们学习字符串模版。`;
document.write(blog);
</script>

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

<script>
let name='OSganping';
let blog = `非常高兴<span>2333内联元素</span>你能看到这篇文章<h2>2333块级元素</h2>,我是你的小伙伴${name}。这节课我们学习字符串模版。`;
document.write(blog);
</script>

对运算的支持

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

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

字符串查找

ES6还增加了字符串的查找功能,而且支持中文哦,小伙伴是不是很兴奋。还是拿上边的文字作例子,进行操作。

查找是否存在:

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

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴OSganping';
document.write(blog.indexOf(name));
</script>

这时网页中输出了20,我们还要自己判断。

ES6直接用includes就可以判断,不再返回索引值,这样的结果我们更喜欢,更直接。

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴OSganping。';
document.write(blog.includes(name));
// 输出true
</script>
判断开头是否存在:
blog.startsWith(name);
判断结尾是否存在:
blog.endsWith(name);

需要注意的是:starts和ends 后边都要加s

复制字符串

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

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

当然ES6对字符串还有一些其它操作,因为实际工作中不太使用,这里就不作太多的介绍了。希望你能动手练习一下,并把这些新特性应用到工作中,否则可能很快就忘记了。

(完)

分享到