设为首页 加入收藏

TOP

模板字符串(Template String)
2017-10-11 13:36:55 】 浏览:2253
Tags:模板 字符串 Template String

语法

模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

用法

// 普通字符串
`In java script '\n' is a line-feed.`

// 多行字符串
`In java script 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>
`);

上面代码中,所有模板字符串的空格和换行都是被保留的,比如

    标签前面会有一个换行。如果想把行首和行尾的换行、空格等去掉,则使用trim方法即可。

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

    模板字符串中嵌入变量,要将变量名写在${}之中。大括号内可以放入任意的java script表达式,可以进行运算,以及引入对象属性。

    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 = eva l.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,它是一个函数。

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇js 监控iframe URL的变化 下一篇es6的这些知识点你了解多少呢?

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目