模板字面量使用实例

目录

1、加号（+）连接字符串

2、模板字面量

3、模板字面量实例运用

---

 

本篇用到的剩余操作符详解：剩余操作符

字符串模板字面量：模板字面量

1、加号（+）连接字符串

以前使用最直接的将字符串和非字符串连接起来的方法就是使用 + 。

let str = 'My age is ';
let num = 18;
console.log(str + num);  // My age is 18

这种方法虽然直观，但是当有多个这样的实例组合在一起时既容易出错，也不方便阅读。那么我们就可以使用模板字面量实现上述方式。

2、模板字面量

使用 `` 将字符串包含其中，使用 ${} 来将变量、表达式、函数等穿插在字符串中。

let num1 = 18;
let num2 = 19;
let num3 = 17;
console.log(`num1:${num1}, num2:${num2}, num3:${num3}`);
// num1:18, num2:19, num3:17

注意：模板字面量中的字符串的数量是大于变量的：

let name = '百度';

console.log(f`${name}`);
// ["", "", raw: Array(2)]
function f(strings) {
    console.log(strings);
}

可以看出，当模板字面量中只有一个变量时，f() 函数输出的结果中没有这个变量的值，且反而会有两个空字符串。

如果想要取得 ${} 中变量的值，可以这样写：

let name = '百度';
let web = 'www.baidu.com';

console.log(f`网站名：${name}, 网址：${web}`);
// ["网站名：", ", 网址：", "", raw: Array(3)]
// ["百度", "www.baidu.com"]
function f(strings, ...vars) {  // "...vars"使用的是“点语法”，此处将所有的变量值集合起来
    console.log(strings);
    console.log(vars);
}

3、模板字面量实例运用

用模板字面量生成 <ul> > <li> 结构，并放入前端页面中：

let Web = [
    {name: '百度', address: 'https://www.baidu.com/'},
    {name: '百度百科', address: 'https://baike.baidu.com/'},
    {name: '百度文库', address: 'https://wenku.baidu.com/'}
]

function a(strings, ...values) {
    return strings.map((str, key) => {
        return str + (values[key] ? values[key].replace(
            '百度', `<a href="https://www.baidu.com/">百度</a>`
        ): "")  // 此处用到 ?: 是因为 strings 中字符串数量大于变量数量，所以当 str 存在但 values[key] 不存在时做加运算的结果为 undefined 。
                // 上述处理完后，使用 replace() 方法将“百度”替换为超链接即可。
    }).join("")
}

document.body.innerHTML += f();

结果：

图3-1  模板字面量生成 <ul> > <li> 结构结果

改进：因为三行文本中都有百度字眼，我们想要让所有的百度字眼都是超链接形式可以点击的：

let Web = [
    {name: '百度', address: 'https://www.baidu.com/'},
    {name: '百度百科', address: 'https://baike.baidu.com/'},
    {name: '百度文库', address: 'https://wenku.baidu.com/'}
]

function  f() {
    return `
        <ul>${
            Web.map(item => a`<li>
                名字：${item.name}, 地址：${item.address}
            </li>`).join("")  // join("") 将数组中的所有元素放入一个字符串中，并用 ""(空字符串) 来分隔
        }</ul>
    `;
}

function a(strings, ...values) {
    return strings.map((str, key) => {
        return str + (values[key] ? values[key].replace(
            '百度', `<a href="https://www.baidu.com/">百度</a>`
        ): "")
    }).join("")
}

document.body.innerHTML += f();

结果：

图3-2  改进后结果