JavaScript ES6 模板字符串详解：基础用法与标签模板

// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`   // Hello Bob, how are you today?

var greeting = `\`Yo\` World!`; // `Yo` World!

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

var x = 1, y = 2;
`${x} + ${y} = ${x + y}`;
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`;
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

function func() {
    return 'Hello';
}
`${func()} World`;
// "Hello World"

// 变量place没有声明
var msg = `Hello, ${place}`;
// ReferenceError: place is not defined

var tmpl = addrs => `
    <table>
    ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
`;
tmpl([{first:'a', last: 'b'}]);
// output:
/*"
    <table>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
    </table>
"*/

// 写法一
var str = 'return ' + '`Hello ${name}!`';
var func = new Function('name', str);
func('Amy');    // "Hello Amy!"
// 写法二
var str = '(name) => `Hello ${name}!`';
var func = eval.call(null, str);
func('Amy');    // "Hello Amy!"

var a = 5, b = 10;
function tag(strings, ...values) {
    console.log(strings[0]);    // "Hello "
    console.log(strings[1]);    // " world"
    console.log(strings[2]);    // ""
    console.log(values[0]);     // 15
    console.log(values[1]);     // 50
    return "Anything";
}
tag`Hello ${a + b} world ${a * b}`;
// Anything

alert`123`
// 等同于
alert(123)

var a = 1,
    b = 2;
tag`Helo ${a + b} world ${a * b}`;

function tag(stringArr, value1, value2) {
    // ...
}
// 等同于
function tag(stringArr, ...values) {
    // ...
}

tag(['Hello ',' world', ''], 3, 2);

String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
String.raw`Hi\u000A!`;
// "Hi\u000A!"
String.rwa`Hi\\n`;
// "Hi\\n"