基本語法
1.es6中徙邻,用反引號(hào)(`)標(biāo)識(shí)劣砍。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
字符串中嵌入變量
1.字符串中嵌入變量 使用${}
妹田。
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time} ?`
2.大括號(hào)里面可以放表達(dá)式 ,可以調(diào)用函數(shù)撩银。
let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
//----------
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
3.如果大括號(hào)中的值不是字符串给涕,將按照一般的規(guī)則轉(zhuǎn)為字符串。比如额获,大括號(hào)中是一個(gè)對(duì)象够庙,將默認(rèn)調(diào)用對(duì)象的toString方法。
4.由于模板字符串的大括號(hào)內(nèi)部抄邀,就是執(zhí)行 JavaScript 代碼首启,因此如果大括號(hào)內(nèi)部是一個(gè)字符串,將會(huì)原樣輸出撤摸。
`Hello ${'World'}`
// "Hello World
其他
1.如果字符串中要使用反引號(hào),則前面要用反斜杠轉(zhuǎn)義。
let greeting = `\`Yo\` World!`;
2.如果使用模板字符串表示多行字符串准夷,所有的空格和縮進(jìn)都會(huì)被保留在輸出之中钥飞。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
如果你不想要這個(gè)換行,可以使用trim
方法消除它衫嵌。
$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());
3.模板字符串還能嵌套读宙。
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));