es6 string template 字符串模板

金钧
2023-12-01

字符串模板(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},就要使用嵌入字符串模板。

 类似资料: