ECMAScript6-字符串扩展

最新推荐文章于 2024-07-06 16:47:02 发布

菜鸟一枚在这

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量110

点赞数

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121243723

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

ECMAScript6-字符串扩展

模板字符串
模板字符串实例
标签模板

上期我们讲到了变量的解构赋值，这期我们开始讲述字符串的相关扩展操作。

ECMAScript6系列文章目录

ECMAScript6-字符串扩展
1、模板字符串
2、模板字符串实例
3、模板标签
总结

1、模板字符串

模板字符串（template string）是增强版的字符串，⽤反引号（`）标识。
它可以当作普通字符串使⽤，也可以⽤来定义多⾏字符串，或者在字符串中嵌⼊变量
如果在模板字符串中需要使⽤反引号，则前⾯要⽤反斜杠转义。
如果使⽤模板字符串表示多⾏字符串，所有的空格和缩进都会被保留在输出之中。
模板字符串之中可以放⼊js表达式、对象属性、还能调⽤函数。
注意：如果模板字符串中的变量没有声明，将报错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //模板字符串的使⽤
    let url = "http://www.baidu.com";
    let title = "百度";
    //传统的⼦串拼装
    console.log('<a href="' + url + '">' + title + '</a>');
    //输出：<a href="http://www.baidu.com">百度</a>
    //使⽤模板⼦串
    console.log(`<a href="${url}">${title}</a>`);
    //输出：<a href="http://www.baidu.com">百度</a>
    //在模板⼦串中输出反引号，可使⽤反斜线转义
    console.log(`Hello \`ZhangSan\`!~`);
    //输出：
    //传统定义多⾏⼦串格式
    let tpl1 = "<ul>" +
        "<li>北京</li>" +
        "<li>上海</li>" +
        "<li>⼴州</li>" +
        "</ul>";
    console.log(tpl1);
    //输出：<ul><li>北京</li><li>上海</li><li>⼴州</li></ul>
    //使⽤模板⼦串定义多⾏⼦串格式，⽽且所有的空格和缩进都会被保留
    let tpl2 = `
         <ul>
         <li>北京</li>
         <li>上海</li>
         <li>⼴州</li>
         </ul>`;
        console.log(tpl2);
        /* 输出：
         <ul>
         <li>北京</li>
         <li>上海</li>
         <li>⼴州</li>
         </ul>
        */
        //模板⼦串中⽀持使⽤对象属性、表达式运算及函数调⽤等操作
        let stu = {name:"张三",age:18};
        console.log(`我叫${stu.name},今年${stu.age}岁,就读于清华⼤⼀,等毕业我就${stu.age + 4}岁了！`);//输出：我叫张三,今年18岁，就读于清华⼤⼀，等毕业我就22岁了！
</script>
</body>
</html>

2、模板字符串实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //将下⾯的数据输出到模板ul标签中
    let data = [
        {name: "张三", sex: 1},
        {name: "李四", sex: 0},
        {name: "王五", sex: 1},
        {name: "赵六", sex: 0},
    ];
    let tpl = `<ul>${data.map(stu => `<li>${stu.name}</li>`).join("")}</ul>`;
    console.log(tpl);
    //输出结果：<ul><li>张三</li><li>李四</li><li>王五</li><li>赵六</li></ul>
    //也可以写出如下格式
    let tpl2 = `<ul>
            ${data.map(stu => `
            <li>
                ${stu.name}
                ${stu.sex == 1 ? "男" : "⼥"}
            </li>
         `).join("")}
        </ul>`;
    document.body.innerHTML = tpl2; //输出⻚⾯body中
</script>
</body>
</html>

3、模板标签

模板字符串的功能，不仅仅是上⾯这些。
它可以紧跟在⼀个函数名后⾯，该函数将被调⽤来处理这个模板字符串。这被称为“标签模板”功能
（tagged template）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("Hello");
    alert `Hello`;
</script>
</body>
</html>

标签模板其实不是模板，⽽是函数调⽤的⼀种特殊形式。
“标签”指的就是函数，紧跟在后⾯的模板字符串就是它的参数。
如果模板字符中有变量，就不是简单的调⽤了，⽽是会将模板字符串先处理成多个参数，再调⽤函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let a = 5;
    let b = 10;
    tag`Hello ${ a + b } world ${ a * b }`;
    // 等同于
    //tag(['Hello ', ' world ', ''], 15, 50);
    //function tag(tpldata, value1, value2){
    // ...
    //}
    // 等同于
    function tag(tpldata, ...values){
        console.log(tpldata);//["Hello ", " world ", ""]
        console.log(values); //[15, 50]
        console.log(arguments);
        //[["Hello ", " world ", ""],15,50]
    }
</script>
</body>
</html>

“标签模板”的⼀个重要应⽤，就是过滤 HTML 字符串，防⽌⽤户输⼊恶意内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义⼀个安全处理html标签函数
    function SaferHTML(tpldata, ...values){
        let s = tpldata[0];
        for (let i = 0; i < values.length; i++){
            let arg = String(values[i]);
            //在替换中转义特殊字符
            s += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");
            //不要转义模板中的特殊字符。
            s += tpldata[i+1];
        }
        return s;
    }
    //测试
    let content = '<script>alert("Hello")<\/script>'; // 恶意代码
    let message = SaferHTML`<p>${content} 已向您发送消息.</p>`; //使⽤标签模板
    console.log(message);
</script>
</body>
</html>

在我们日常输入里面，如果输入甚至更严重的标签，会破坏我们的版面。

总结

这一期我们主要讲解了字符串的扩展，下期我们继续讲解字符串的相关内容

菜鸟一枚在这

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript6-字符串扩展

ECMAScript6-字符串扩展模板字符串模板字符串实例标签模板上期我们讲到了变量的解构赋值，这期我们开始讲述字符串的相关扩展操作。ECMAScript6系列文章目录ECMAScript6-字符串扩展1、模板字符串2、模板字符串实例3、模板标签总结1、模板字符串模板字符串（template string）是增强版的字符串，⽤反引号（`）标识。它可以当作普通字符串使⽤，也可以⽤来定义多⾏字符串，或者在字符串中嵌⼊变量如果在模板字符串中需要使⽤反引号，则前⾯要⽤反斜杠转义。如果
复制链接

扫一扫