模板字面量的主要功能
- 多行字符串：一個(gè)正式的多行字符串的概念
- 基本的字符串格式化：將變量的值嵌入字符串的能力
- HTML轉(zhuǎn)義 向HTML插入經(jīng)過安全轉(zhuǎn)換后的字符串的能力
基礎(chǔ)語法
let message = `Hello world`;
模板字面量可以使用反斜杠(/),在模板字面量中不需要轉(zhuǎn)義單,雙引號(hào)
模板字面量可以很簡(jiǎn)潔的使用多行字符串
let message = `Hello
world`
- 在模板字面量中，可以把任何合法的javascript表達(dá)式嵌入到占位符中并將其作為字符串的一部分輸出到結(jié)果中餐禁。
占位符有一個(gè)左側(cè)的${和右側(cè)的}符號(hào)組成樟澜，中間可以包含任意的javascript表達(dá)式
let name = 'Nicholas',
message = `Hello ${name}`
注意事項(xiàng)
模板字面量可以訪問作用域中所有可訪問的變量和屎，而嵌入未定義的變量會(huì)拋出錯(cuò)誤
可以在模板字面量中嵌入另外一個(gè)
let name = 'Nicholas',
message = 'Hello, ${
`my name is ${name}`
}.`;
標(biāo)簽?zāi)０?/h1>
- 標(biāo)簽?zāi)０迨窃谀０遄置媪康谝粋€(gè)反撇號(hào)(`)前方標(biāo)注的字符串
let message = tag`Hello world`
- 標(biāo)簽是一個(gè)函數(shù)，第一個(gè)參數(shù)是一個(gè)數(shù)組锌唾，包含JavaScript解釋過后的字面量字符串，它之后的所有參數(shù)都是每一個(gè)站位符的解釋值
function tag(literals,...substitutions) {
}
let a = 5,b = 10;
let tag = (s,v1,v2)=>{
console.log(s);
console.log(v1);
console.log(v2);
}
tag`Hello ${a+b} world ${a*b}`; //['Hello ',' world ','']
//15
//50
- 通過String.raw()標(biāo)簽可以訪問到字符轉(zhuǎn)義被轉(zhuǎn)換成等價(jià)字符前的原聲字符串
let message1 = `Multiline\nstring`;
let message2 = String.raw`Multiline\nstring`;
console.log(message1); //'Multiline
//string'
console.log(message2); //'Multiline\nstring'
let message = tag`Hello world`
function tag(literals,...substitutions) {
}
let a = 5,b = 10;
let tag = (s,v1,v2)=>{
console.log(s);
console.log(v1);
console.log(v2);
}
tag`Hello ${a+b} world ${a*b}`; //['Hello ',' world ','']
//15
//50
let message1 = `Multiline\nstring`;
let message2 = String.raw`Multiline\nstring`;
console.log(message1); //'Multiline
//string'
console.log(message2); //'Multiline\nstring'
