JavaScript 标签模板字面量

标签函数

标签函数（Tag Function）是JavaScript模板字符串的一个高级用法，它允许开发者定义一个函数来处理模板字符串。以下是标签函数的用法整理，包括详细说明和代码示例：

用法分类	说明	代码示例
基本用法	标签函数接收模板字符串的字符串部分和表达式部分作为参数。	function tag(strings, ...values) { ... }
参数解析	标签函数的第一个参数是一个字符串数组，包含模板字符串的静态部分；其余参数是模板字符串中的表达式。	function tag(strings, name, age) { ... }
字符串拼接	使用join方法将字符串数组拼接成完整的字符串。	let sql = strings.join('?');
表达式处理	表达式参数可以被用来替换模板字符串中的${}占位符。	...values 在模板字符串中被替换为具体的值。
执行操作	标签函数可以执行特定的操作，如生成SQL语句、格式化字符串等。	function sql(strings, ...exps) { ... }
安全性	标签函数可以用于避免SQL注入等安全问题，因为它可以控制字符串的拼接方式。	使用预处理语句或参数化查询来生成安全的SQL语句。
返回结果	标签函数可以返回任何类型的结果，如对象、字符串或布尔值。	return { name: '小明', age: 20 };
简化调用	使用标签函数简化模板字符串的调用，提高代码的可读性。	let result = tagsome operation${variable};`
实际应用	标签函数可以用于数据库操作、日志记录、国际化等场景。	updateUPDATE users SET age=${age}, score=${score} WHERE id=${id}`;

const email = "test@example.com";
const password = 'hello123';

function sql(strings, ...exps) {
    console.log(`SQL: ${strings.join('?')}`);
    console.log(`SQL parameters: ${JSON.stringify(exps)}`);
    return {
        name: '小明',
        age: 20
    };
}

const result = sql`SELECT * FROM users WHERE email=${email} AND password=${password}`;

console.log(JSON.stringify(result));


// sql`SELECT * FROM users WHERE email=${email} AND password=${password}`

模板字符串前面以sql开头，实际上这是一个标签函数，上述语法会自动转换为对sql()函数的调用。我们关注的是，传入sql()函数的参数是什么。

sql()函数实际上接收两个参数：

第一个参数strings是一个字符串数组，它是["SELECT * FROM users WHERE email=", " AND password=", ""]，即除去${xxx}剩下的字符组成的数组；

第二个参数...exps是一个可变参数，它接收的也是一个数组，但数组的内容是由模板字符串里所有的${xxx}的实际值组成，即["test@example.com", "hello123"]，因为解析${email}得到"test@example.com"，解析${password}得到"hello123"。

标签函数sql()实际上是一个普通函数，我们在内部把strings拼接成一个SQL字符串，把...exps作为参数，就可以实现一个安全的SQL查询，并返回查询结果。此处并没有真正的数据库连接，因此返回一个固定的Object。

标签函数和普通函数的定义区别仅仅在于参数，如果我们想对数据库进行修改，完全可以定义一个标签函数如下：

function update(strings, ...exps) {
    let sql = strings.join('?');
    // 执行数据库更新
    // TODO:
}

函数调用可以简化为带标签的模板字符串：

let id = 123;
let age = 21;
let score = 'A';

update`UPDATE users SET age=${age}, score=${score} WHERE id=${id}`;