es6模板字符串

发布时间:2020-03-29 03:37:51 作者:mp624183768
来源:网络 阅读:280

var arr = [1,2,3];
`xxx ${arr} xxx`//xxx 1,2,3 xxx
字符串拼接是开发时一个必不可少的环节,也是很恶心的一个环节,尤其是又臭又长的html字符串拼接。

为什么说html字符串拼接很恶心呢,主要有以下几点:

  1. 传统的字符串拼接不能正常换行
  2. 传统的字符串拼接不能友好的插入变量
  3. 传统的字符串拼接不能友好的处理单引号、双引号互相嵌套的问题。

es6的模板字符串解决了以上问题
es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。

var s = `hello world`
我们通常这样拼接html字符串。
var html = '<ul>'+
'<li>1</li>'+
'<li>2</li>'+
'</ul>'
如果html标签里面有其他的引号,那就更恶心了,但是,使用es6,只需要这要就ok了。
var html = `<ul>
<li>1</li>
<li>2</li>
</ul>`

在windows键盘上,``是英文输入法下tab按键上面那个键。

它同样支持变量的嵌套,甚至功能更加强大


{}里面可以插入任何js表达式,还可以是一个对象、数组,甚至是一个函数。

对象或者数组会调用它们的toString()方法

var obj = {a:1,b:2};
`xxx ${obj} xxx`//xxx [object Object] xxx

var s1 = `hello vue`;
`xxx ${s1} xxx` //xxx hello vue xxx

函数分两种情况:

  1. 函数本身,同样会调用它的tostring()方法
  2. 直接调用函数,则输出函数的返回值
var fn1 = function(){
console.log('hello vuex');
}
var fn2 = function(){
return 'hello vue-router'
}
`xxx ${fn1}`//xxx function fn(){....}
`xxx ${fn1()}`//xxx underfind
`xxx ${fn2()}`//xxx hello vue-router

如果{}里面的变量是个不存在的变量呢?

es6模板字符串


推荐阅读:
  1. Kotlin字符串模板
  2. ES6中模板字符串的使用方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web开发 html/css 符串

上一篇:Docker部署Nginx、Tomcat集群

下一篇:调整数组使奇数全部都位于偶数前面。

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》