es6 string template 字符串模板

wangjun5159

于 2020-03-25 19:28:17 发布

阅读量590

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/95600104

本文深入探讨ES6中引入的字符串模板功能，通过对比传统字符串拼接方式，展示字符串模板如何简化代码，提高开发效率。文章通过实例讲解了基本用法、变量嵌入以及复杂表达式的使用，如三目运算符嵌套。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字符串模板(template string)解决了拼html的痛苦，没有字符串模板前，需要这么写

var myName = "itsme";
var html = "<input type=\"text\" name=\"myName\" value=\""+myName+"\"/>";
console.log(html);

大量的转义字符、+号，很容易拼错而且不容易排查。为了解决这个问题，ES6推出字符串模板，字符串模板以 `` 引用，变量使用 ${variableName}表示，这下简洁多了吧。

var myName = "itsme";
var html = `<input type="text" name="myName" value="${myName}"/>`;
console.log(html);

来点更复杂的，嵌套字符串模板，这种情况在三目运算符中经常出现，比如


var myName = "itsme";
var anotherName="yes,its me";
var html = `${myName==='itsme'?`hello,${anotherName}`:'notme'}`;
console.log(html); //hello,yes,its me

简单来说，要想在${vari}中使用${vari}，就要使用嵌入字符串模板。