ES6——模板字符串

最新推荐文章于 2023-12-09 00:16:48 发布

-不笑猫

最新推荐文章于 2023-12-09 00:16:48 发布

阅读量190

点赞数

分类专栏：初学前端文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/LHJ0521/article/details/126714874

版权

初学前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了ES6中模板字符串的特点，包括使用反引号表示、简化字符串拼接、支持多行编写以及允许在字符串中嵌入表达式和函数，提高了JavaScript代码的可读性和简洁性。

摘要由CSDN通过智能技术生成

与普通字符串的区别

相较于普通字符串，模板字符串使用反引号 ` 来代替普通字符串中的用双引号 " 和单引号 ’ ，模板字符串省去了大量 + 和 " 的使用，方便阅读和编写

  <script>
    const name = "张三";
    const age = "18";
    const sex = "男";

    const normal = "他叫" + name + "，是一名" + age + "岁的" + sex + "人";
    const template = `他叫${name}，是一名${age}岁的${sex}人`;
    document.getElementById("normal").innerText = normal;
    document.getElementById("template").innerText = template;
  </script>

在这里插入图片描述

模板字符串支持多行编写

    const normal = 
      "名字：" + name + 
      "年龄：" + age + 
      "性别：" + sex;
    const template = `
      名字： ${name}
      年龄： ${age}
      性别： ${sex}
    `
    document.getElementById("normal").innerText = normal;
    document.getElementById("template").innerText = template;

输出结果：
在这里插入图片描述

模板字符串内也可以正常使用函数以及表达式

    const name = "张三";
    const age = "18";
    const sex = "男";
    function fn(name) {
      return name + "成年了吗？";
    }
    const template = `
      ${fn(name)}
      ${age >= 18 ? "成年了" : "没成年"}
    `;
    document.getElementById("template").innerText = template;