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

模板字符串【ES6】

news 2025/9/8 16:46:38

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

什么是模板字符串？

模板字符串（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>