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

系列文章目录

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


文章目录

  • 系列文章目录
  • 1. 模板字符串
    • 1.1. 写法
    • 1.2. 普通字符串
    • 1.3. 多行字符串
    • 1.4. 嵌入变量
    • 1.5. 注意点
    • 1.6. 嵌套
    • 1.7. 可写成函数
    • 1.8. 练习
  • 2. 标签模板字符串
    • 2.1. 本质
    • 2.2. 参数传入
    • 2.3. 练习
    • 2.3. 应用


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 = `
  • 你好

`
; 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!'
  1. 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

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

// 变量place没有声明
let msg = `Hello, ${place}`;
// 报错 ReferenceError: place is not defined
  1. 由于模板字符串的大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出
        const greeting = `Hello ${'World'}`;
        greeting // 'Hello World'

1.6. 嵌套

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

1.7. 可写成函数

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

1.8. 练习

ES6_04- 模板字符串+标签模板字符串_第1张图片

        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 (
                `
    ${Jelly.todos.map(todo => `
  • ${todo.name}${todo.completed ? '✔' : '❌'}
  • `
    ).join('')}
`
) } const template = `
${Jelly.name}
${renderTodos(Jelly.todos)}
`
; 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. 练习

ES6_04- 模板字符串+标签模板字符串_第2张图片

        function highlight(strings, ...values) {
            const highlighted = values.map(value => `${value}`);

            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. 多语言转换(国际化处理)。

你可能感兴趣的:(ES6,javascript,前端)