整理 模版字符串

Xixibao
4 min readJul 29, 2021

定义:
1、模版字符串使用` 反引号代替普通字符串的 ‘ 和 “
2、模版字符串 包含 ${expression} 形式的占位符。
3、在` `内使用 反引号 需要在前面加转义符 ` \``=== “ ` ” => true

作用:
1、模版字符串可以帮你获得多行字符串。

Str = "CC is studying." +
"CC is eating."
console.log(Str)
Str2 = `CC is studying.
CC is eating.`
console.log(Str2)

2、模版字符串可以帮助你更优雅的插入表达式。

const a = 10
const b = 5
outPut = "Fifteen is " + (a+b) + "\nnot 20"
outPut2 = `Fifteen is ${a+b}
not 20`
console.log(outPut2)

3、解决嵌套模版问题。

var classes = 'header'
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');
const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

4、带标签的模版字符串,可以使用标签函数解析模版字符串。标签函数的第一个参数包含一个字符串数值的数组,其余参数与函数表达式相关。

var person = 'Mike'
var age = 28
function myTag(strings,personExp,ageExp){
var str0 = strings[0];
var str1 = strings[1];

var ageStr;
if(ageExp > 99){
ageStr = 'centenarain';
}else{
ageStr = 'youngeter';
}

return str0 + personExp + str1 + ageStr
}
var output = myTag`that ${person} is a ${age}`
console.log(output) //that Mike is a youngeter

标签函数并不一定需要返回一个字符串

function…

--

--