当前位置：首页 > article >正文

模板字符串【ES6】

article 2025/3/9 7:59:18

“路漫漫其修远兮，吾将上下而求索。”—— 屈原《离骚》

什么是模板字符串？

模板字符串（Template Literals）是JavaScript中引入的一种新的字符串表示方式，它使用反引号（`）而不是单引号（'）或双引号（"）来定义字符串。

模板字符串特性及代码举例：

多行字符串‌：模板字符串可以直接包含换行符，而不需要使用转义字符（\n）或字符串连接符（+）来连接多行字符串。

let message = `Hello,
world!`;
console.log(message);
//Hello,
//world!

嵌入表达式‌：模板字符串中可以使用${}语法来嵌入表达式。这些表达式会被求值，并将其结果转换为字符串后嵌入到模板字符串中。

let name = "Alice";
let age = 30;
let greeting = `Hello, ${name}! You are ${age} years old.`;
console.log(greeting);// Hello, Alice! You are 30 years old.

标签模板：模板字符串前面可以添加一个“标签”函数，该函数可以对模板字符串的内容进行处理，并返回一个结果。这提供了一种高级用法，允许开发者完全控制模板字符串的处理方式。

let name = "Alice";
let age = 30;
function tag (strings, ...values) {
      console.log(strings); // 模板字符串中的静态部分
      console.log(values);  // 插值表达式的结果
      return `Tagged template result`;
}

let result = tag`My name is ${name} and I am ${age} years old.`;
console.log(result);

在这里插入图片描述

String.raw方法‌：模板字符串还可以通过String.raw方法来获取“原始”字符串，即不对反斜杠（\）进行转义处理。

let path = `C:\Users\name`;
let rawPath = String.raw`C:\Users\name`;
console.log(path);   // 输出: C:\Usersame
console.log(rawPath);// 输出: C:\Users\name

详细举例用法：

${ }里面可以放表达式、+ 、-、*、/、普通变量、三目运算符、调用函数等!!!

<body>
  <ul>
  </ul>
  <style>
    .active {
      color: red;
    }
  </style>
  <script>
    let arr = ['kitty', 'Alice', 'Bob'];
    let newList = arr.map((item, index) => {
      return `<li class="${index == 0 ? 'active' : ''}">
        <b>${item}</b>
      </li>`;
    })
    console.log(newList);
    let oul = document.querySelector("ul");
    oul.innerHTML = newList.join("")
  </script>
</body>

在这里插入图片描述

<body>
  <ul>
  </ul>
  <style>
    .active {
      color: red;
    }
  </style>
  <script>
    let name = 'Kitty';
    let oli = `<li><b> ${name}</b></li>`
    function test () {
      return "自定义添加的内容"
    }
    let arr = ['kitty', 'Alice', 'Bob'];
    let newList = arr.map((item, index) => {
      return `<li class="${index == 0 ? 'active' : ''}">
        <b>${item}</b>
        ${test()}
      </li>`;
    })
    console.log(newList);
    let oul = document.querySelector("ul");
    oul.innerHTML = newList.join("")
  </script>
</body>