ES6入门到进阶（2）—模板字符串

最新推荐文章于 2024-10-09 16:05:38 发布

前端-阿来

最新推荐文章于 2024-10-09 16:05:38 发布

阅读量871

点赞数 1

文章标签： JS JavaScript 模板字符串原生js 新手学习js

本文链接：https://blog.csdn.net/weixin_43482353/article/details/100623408

版权

模板字符串介绍
用法示例
总结

模板字符串介绍：

定义：模板字符串相当于加强版的字符串，用反引号(`) 标识。它可以当作普通普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量或表达式。

用法示例：

语法：

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

如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。

let hi= `\`hello\` World!`; // `hello` World!

如果使用模板字符串表示多行字符串，则所有的空格、缩进和换行都会被保留在输出中。

let str = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`;

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

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

模板字符串之中还可以调用函数。

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

模板字符串之间还可以进行嵌套。

let temp= attrs=> `
    <table>
    ${attrs.map(attr=> `
        <tr><td>${attr.first}</td></tr>
        <tr><td>${attr.last}</td></tr>
    `).join('')}
    </table>
`;
 
temp([{first:'a', last: 'b'}]);
 
// output:
/*"
    <table>
 
        <tr><td>a</td></tr>
        <tr><td>b</td></tr>
 
    </table>
"*/