🤨博主：小猫娃来啦
🤨文章核心：优雅而高效的JavaScript——模板字面量
什么是模板字面量
- 模板字面量的定义
模板字面量是一种更强大、更灵活的字符串表示方式，使用反引号（）包裹。与传统的字符串表示方式相比，模板字量允许在字符串中插入变量、表达式和原始字符串，并且支持多行文本的处理。
- 模板字面量的特点
使用模板字面量插入变量
- 使用
${}语法插入变量
使用${}语法可以在模板字面量中插入变量，例如
const name = 'Alice';
const message = `Hello, ${name}!`;
console.log(message); // Hello, Alice!
- 嵌套插入变量
模板字面量允许在${}语法中嵌套插入变量，例如：
const = 'John';
const lastName = 'Doe';
const fullName = `${firstName} ${lastName}`;
const message = `Hello, ${fullName}!`;
console.log(message); // Hello, John Doe!
- 插入表达式
除了插入变量，模板字面量还可以插入任意的JavaScript表达式，例如：
const num1 = 5;
const num2 = 10;
const sum =The sum of ${num1} and ${num2} is ${num1 + num}.`;
console.log(sum); // The sum of 5 and 10 is 15
- 插入原始字符串
在模板字面量中插入原始字符串时，可以使用${}语法的原始字符串形式，例如：
const rawString = String.raw`HelloWorld`;
console.log(rawString); // Hello\nWorld
处理多文本
- 使用模板字面量的多行文本
模板字面量可以直接处理多行文本，不再需要手动添加换行符，例如：
const message = `This a
multi-line
text.`;
console.log(message);
// This is a
//-line
// text.
- 多行文本的缩进和格式化
模板字面量支持多行文本的缩进和格式化，可以使用${}语法嵌套实现，例如：
const indentExample = `
This is an example
of ind text.`;
console.log(indentExample);
// This is an example
// of indented text.
- 多行文本转义字符
在模板字面量中使用多行文本时可以使用转义字符来处理特殊字符，例如：
constExample = `This is a\`
multi-line\`
text.`;
console.log(escapeExample);
// This is a
// multi-line
// text.
模板字面量的高级应用
标签模板字量
标签模板字面量是一种使用自定义函数处理板字面量的方式，可以在${}语法前添加一个函数名作为前缀，例如：
function greeting(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}strings[1]}`;
}
const name = 'alice';
const message = greeting`Hello ${name}!`;
console.log(message); // Hello, ALICE!
自定义模板字面量函数
可以自定义模板字面量函数来处理特定的逻辑，例如：
function multiplier(strings, ...values) {
const num = Number(values[]);
return strings[0] + (num * 2) + strings[1];
}
const value = 5;
const result = multiplier`The result is: ${value}.`;
console.log(result); // The result is: 10.
常见应用场景
拼接字符串
模板字面量可用于更简洁拼接字符串，特别是含有变量和表达式的情况，例如：
const name = 'Garfield';
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // My name Garfield and I am 30 years old.
HTML模板
const data = { name: 'Alice', age: 30 };
const html = `
<div>
<h1>${data.name}</h1>
<p>Age: ${data.age}</p>
</div>
`;
console.log(html);
// <div>
// <h1>Alice</h1>
// <p>Age: 30</p>
// </div>
SQL查询
在构建SQL查询时，模板字面量可用于拼接SQL语句和插入变量，例如：
const firstName = '菲猫';
const lastName = '加';
const query = `
SELECT *
FROM users
WHERE first_name = '${firstName}'
AND last_name = '${lastName}'
`;
console.log(query);
// SELECT *
// FROM users
// WHERE first_name = '菲猫'
// AND last_name = '加'
在这或许有很多没有接触过sql语句的程序员
那么我稍微解释一下：
文件路径拼接
模板字面量还可以方便地拼接文件路径，特别是需要插入变量的情况，例如：
const dir = 'path/to';
file = 'index.html';
const filePath = `${dir}/${file}`;
console.log(filePath); // path/to/index.html