模板字符串【ES6】
- 游戏开发
- 2025-09-19 00:09:01
“路漫漫其修远兮，吾将上下而求索。”—— 屈原《离骚》
目录 什么是模板字符串？模板字符串特性及代码举例：详细举例用法： 什么是模板字符串？模板字符串（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>模板字符串【ES6】由讯客互联游戏开发栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“模板字符串【ES6】”
