1、模板字面量
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>模板字面量/模板字符串</title> </head> <body> <script> // es6 使用一对反引号``来解决换行与嵌入问题 // 1. 多行字符串 let str = ` This is a first line string This is a second line string This is three line string.`; // 清除前面的空白.trim() str = ` <ul> <li>melinda</li> <li>melinda@php.cn</li> <li>lecture</li> </ul>`.trim(); console.log(str); // 2. 变量嵌入 // 占位符: ${js表达式} let username = "melinda"; // let message = "Hello " + username; let message = `Hello, ${username} , 你好！`; console.log(message); // 占位表达式支持计算 console.log(`3 * 4 = ${3 * 4}`); function getUsername(username) { return username; } // 占位表达式支持函数 console.log(`我的姓名是: ${getUsername("melinda")}`); // 模板字面量支持嵌套 // `${`模板字面量`}` console.log(`Hello, ${`我的姓名是: ${getUsername("melinda")}`}`); </script> </body></html>
2、标签模板，标签函数参数及遍历
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>标签模板/模板标签</title> </head> <body> <script> // 1. 传统函数 // alert("Hello php中文网"); // 在一个模板字面量前面添加一个标签,就可以起到函数调用的效果 // alert`Hello php中文网`; function getUser(name, email) { console.log("My name is ", name); console.log("My email is ", email); } let name = "melinda"; let email = "melinda@php.cn"; // getUser(name, email); // 用标签模板来调用它 getUser`${name}, ${email}`; // 标签模板: 模板字面量前是一个"标识符,本质上是一个函数" // 所以,我们可以认为标签模板是函数调用的特殊形式 // 函数名: 模板字面量前面的标识符 // 调用参数: 标签后面的模板字面量 // 2. 标签函数 // tag(strings, ...values) let width = 80; let height = 30; // 标签后面的模板字面量必须要保证第一个和最后一个必须是字符串 let area = calculateArea`Width: ${width} * Height: ${height} = Area: ${ width * height }`; // 定义这个标签对应的函数 function calculateArea(strings, ...values) { console.log(strings); console.log(values); // 当前模板字面量中的字面量数组元素数量总是比表达式占位符数量多1 // console.log(strings.length === values.length + 1); let result = ""; for (let i = 0; i < values.length; i++) { result += strings[i]; result += values[i]; } // 添加最后一个字符字面量到结果中 result += strings[strings.length - 1]; return result; } console.log(area); // 3. 模板原始值 // 换行 let msg = `Hello \n 小景`; console.log(msg); // 显示\n，raw不会换行 let str = String.raw`Hello \n 小景`; console.log(str); function getRaw(strings, ...values) {} </script> </body></html>
- 总结：
- 多行字符串与变量嵌入到页面中：由自定义函数和标签模板组成
- 标签模板要使用反引号``
