ES6_04- 模板字符串+标签模板字符串

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

---

1. 模板字符串

1.1. 写法

• 模板字符串（template string）是增强版的字符串，用反引号（`）标识。

``

• 它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

1.2. 普通字符串

此时，用法与""全等。

        const a = `in js '/n' is a line-feed.`;
        a // "in js '/n' is a line-feed."

1.3. 多行字符串

• 字符串内的内容可换行。
• 所有的空格、缩进、换行都会被保留在输出之中。可以用trim()方法消除。

        const b = `In JS this is
        not legal.`
        b // 'In JS this is\n        not legal.'


        console.log(`string text line 1
        string text line 2`);
        /* string text line 1
        string text line 2 */
        console.log(`
        string text line 1
        string text line 2`.trim());

        const box = document.querySelector('.box');
        let htmlStr = `<ul>
            <li>
                <p>你好</p>
            </li>
        </ul>`;
        box.innerHTML = htmlStr;

1.4. 嵌入变量

• 写法：将变量套入${}中。
• 用法：${}中可放入任意JavaScript表达式。如，运算，引用对象属性，调用函数等。

let x = 1;
let 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 fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

1.5. 注意点

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

        let greeting = `\`Yo\`, World!`;
        greeting // '`Yo`, World!'

2. 如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。

3. 如果模板字符串中的变量没有声明，将报错。

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

4. 由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。

        const greeting = `Hello ${'World'}`;
        greeting // 'Hello World'

1.6. 嵌套

详情见《ECMAScript 6 入门》阮一峰

1.7. 可写成函数

详情见《ECMAScript 6 入门》阮一峰

1.8. 练习

        const Jelly = {
            name: 'Jelly',
            date: '2022-08-06',
            todos: [
                { name: 'Go to Store', completed: true },
                { name: 'Watch the Movie', completed: false },
                { name: 'Running', completed: true },
            ]
        };

        function renderTodos(todos) {
            return (
                `<ul>
                 ${Jelly.todos.map(todo => `
                  <li>
                    ${todo.name}${todo.completed ? '✔😀' : '❌🙁'}
                  </li>`).join('')}
              </ul>`
            )
        }

        const template = `
        <div class="panel">
            <div class="panel-header">${Jelly.name}</div>
            <div class="panel-body">
              ${renderTodos(Jelly.todos)}
            </div>
            <div class="panel-footer">${Jelly.date}</div>
        </div>
        `;

        document.body.innerHTML = template;

        console.log(template);

2. 标签模板字符串

2.1. 本质

• 模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。
• “标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

2.2. 参数传入

• 如果模板字符里面有变量，会将模板字符串先处理成多个参数，再调用函数。
• 处理方法：
  1、函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分。如果变量作为模板字符串开头or结尾，则这个数组里会有空字符串“”出现。
  2、函数的其他参数，都是模板字符串各个变量被替换后的值。

let a = 5;
let b = 10;

function tag(stringArr, value1, value2){
// ...
}

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
// tag(['Hello ', ' world ', ''], 15, 50);
// 第一个参数：['Hello ', ' world ', '']
// 第二个参数: 15
// 第三个参数：50

3、如果形参写法为（s,...values），则values返回的是一个由变量组成的数组。

let a = 5;
let b = 10;

function tag(stringArr, ...values){
// ...
}

tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
// tag(['Hello ', ' world ', ''], [15, 50]);
// 第一个参数：['Hello ', ' world ', '']
// 第二个参数: [15, 50]

2.3. 练习

        function highlight(strings, ...values) {
            const highlighted = values.map(value => `<span class="highlight">${value}</span>`);

            return strings.reduce((prev, curr, i) => `${prev}${curr}${highlighted[i] || ''}`, '')
        }

        const user = 'Mary';
        const topic = 'learn to use markdown';
        const sentence = highlight`${user} has commented on your topic ${topic}`;

        document.body.innerHTML = sentence;

2.3. 应用

详情见[《ECMAScript 6 入门》阮一峰 / §标签模板

1. 过滤 HTML 字符串，防止用户输入恶意内容。
2. 多语言转换（国际化处理）。