模板字符串(Template String)

语法

模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它能够看成平常字符串运用,也能够用来定义多行字符串,或许在字符串中嵌入变量。

用法

// 平常字符串
`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>
`);

上面代码中,一切模板字符串的空格和换行都是被保存的,比方<ul>标签前面会有一个换行。假如想把行首和行尾的换行、空格等去掉,则运用trim要领即可。


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

模板字符串中嵌入变量,要将变量名写在${}当中。大括号内能够放入恣意的JavaScript表达式,能够举行运算,以及引入对象属性。


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"

假如大括号中的值不是字符串,则将根据平常的划定规矩转换为字符串。如,若大括号中是一个对象,则将默许挪用对象的toString要领,把对象转换为字符串。

假如模板字符串中的变量没有声明,则会报错。


// 变量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!"
标签模板

模板字符串的功用,不仅是上面那些,它还能够紧跟在一个函数背面,该函数将被挪用来处置惩罚这个模板字符串,这类称为“标签模板”功用(Tagged template)。

标签模板函数第一个参数是字符串模板的常量数组,背面的每个参数为表达式的计算结果,函数称号能够恣意指定。下面是一个例子:


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}`;

上面代码中,模板字符串前面有一个标识名tag,它是一个函数。

    原文作者:coco
    原文地址: https://segmentfault.com/a/1190000010283841
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞