首页 > 代码库 > 字符串模版,替代原来Es5的+号拼装字符串
字符串模版,替代原来Es5的+号拼装字符串
字符串模版
这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作。小伙伴们是不是已经摩拳擦掌等不急了那?那我们就开始吧。
先来看一个在ES5下我们的字符串拼接案例:
let xzdemo=‘小智‘;let blog = ‘非常高兴你能看到这篇文章,我是你的朋友‘+xzdemo+‘。这节课我们学习字符串模版。‘;document.write(blog);
ES5下必须用+ xzdemo +这样的形式进行拼接,这样很麻烦而且很容易出错。ES6新增了字符串模版,可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号,而是换成了xxx这种形式,也叫连接号。这时我们再引用xzdemo变量就需要用${ xzdemo }这种形式了,我们对上边的代码进行改造。
let xzdemo=‘小智‘;let blog = `非常高兴你能看到这篇文章,我是你的朋友${xzdemo}。这节课我们学习字符串模版。`;document.write(blog);
可以看到浏览器出现了和上边代码一样的结果。而且这里边支持html标签,可以试着输入一些。
let xzdemo=‘小智‘;let blog = `<b>非常高兴你能看到这篇文章</b>,我是你的朋友${xzdemo}。<br/>这节课我们学习字符串模版。`;document.write(blog);
对运算的支持:
let a=1;let b=2;let result=`${a+b}`;document.write(result);
强大的字符串模版,在实际开发中,我们可以让后台写一个活动页面,然后轻松的输出给用户。
字符串查找
ES6还增加了字符串的查找功能,而且支持中文哦,小伙伴是不是很兴奋。还是拿上边的文字作例子,进行操作查找是否存在:
先来看一下ES5的写法,其实这种方法并不实用,给我们的索引位置,我们自己还要确定位置。
let xzdemo=‘小智‘;let blog = ‘非常高兴你能看到这篇文章,我是你的朋友小智。这节课我们学习字符串模版。‘;document.write(blog.indexOf(xzdemo));
这是网页中输出了19,我们还要自己判断。
ES6直接用includes就可以判断,不再返回索引值,这样的结果我们更喜欢,更直接。
let xzdemo=‘小智‘;let blog = ‘非常高兴你能看到这篇文章,我是你的朋友小智。这节课我们学习字符串模版。‘;document.write(blog.includes(xzdemo));
判断开头是否存在:
blog.startsWith(xzdemo); //开头没有小智两个字
判断结尾是否存在:
blog.endsWith(xzdemo);//结尾没有小智两个字
需要注意的是:starts和ends 后边都要加s,我开始时经常写错,希望小伙伴们不要采坑。
复制字符串
我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。
document.write(xzdemo|‘.repeat(3));
字符串模版,替代原来Es5的+号拼装字符串
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。