优雅而高效的JavaScript——模板字面量

🤨博主：小猫娃来啦

🤨文章核心：优雅而高效的JavaScript------模板字面量

文章目录

• 什么是模板字面量
• 使用模板字面量插入变量
• 处理多文本
• 模板字面量的高级应用
• • 标签模板字量
  • 自定义模板字面量函数
• 常见应用场景
• • 拼接字符串
  • HTML模板
  • SQL查询
  • 文件路径拼接
• 与统字符串拼接的比较

什么是模板字面量

• 模板字面量的定义

模板字面量是一种更强大、更灵活的字符串表示方式，使用反引号（）包裹。与传统的字符串表示方式相比，模板字量允许在字符串中插入变量、表达式和原始字符串，并且支持多行文本的处理。

• 模板字面量的特点

• 使用反引号（`）包裹字符串，使得字符串更清晰易读。
• 使用${}语法可以在字符串中插入变量和表达式。
• 支持多行文本的处理，不再需要手动添加换行符。

---

使用模板字面量插入变量

• 使用${}语法插入变量

使用${}语法可以在模板字面量中插入变量，例如

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语句的程序员

那么我稍微解释一下：

SELECT * FROM users WHERE first_name = '菲猫' AND last_name = '加' 这是个SQL查询语句
SELECT 表示查询*表示所有，FORM表示来自，users 是数据表的名字，WHERE 是条件语句 first_name = 'Alice' AND last_name = 'Smith' 是查询条件

翻译为：在用户表中查询first_name（名）是菲猫 ，并且 last_name（姓氏）是加的用户的所有信息

文件路径拼接

模板字面量还可以方便地拼接文件路径，特别是需要插入变量的情况，例如：

const dir = 'path/to';
 file = 'index.html';
const filePath = `${dir}/${file}`;
console.log(filePath); // path/to/index.html

---

与统字符串拼接的比较

• 效率比较

与传统字符串拼接相比，模板字面量通常在运行时更高效。由于模板字面量的编译阶段已经将变量和表达式嵌入到字符串中，不需要运行时的拼接操作，因此更快速。

• 可读性比较

模板字面量可以更清晰地展示字符串中的变量和表达式，使得代码更易读和维护。传统字符串拼接可能会导致代码难以阅读和理解，尤其是在包含多个变量和表达式的情况下。

• 安全性比较

使用模板字面量可以更有效地避免注入攻击。由于模板字面量对变量和表达式的处理是在编译阶段完成的，可以确保在运行时不会执行不安全的代码。
关于模板字符串就介绍到这里啦

---