MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript模板标签与字符串处理

2021-05-062.1k 阅读

JavaScript 模板标签基础

在 JavaScript 中，模板标签是一种强大的功能，它与模板字面量紧密相关。模板字面量是一种创建字符串的新方式，使用反引号 (`) 来界定字符串。模板字面量允许嵌入表达式，这在传统的字符串表示法中是不可能的。例如：

const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); 
// 输出: Hello, Alice!

这里 ${name} 就是一个嵌入的表达式，JavaScript 会将 name 变量的值替换到字符串中。

模板标签则是在模板字面量基础上的进一步扩展。模板标签是一个函数，它的第一个参数是一个包含模板字面量中所有文本片段的数组，后续的参数则是模板字面量中嵌入表达式的值。来看一个简单的例子：

function myTag(strings, ...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += values[i];
        }
    }
    return result;
}

const num1 = 5;
const num2 = 3;
const result = myTag`The sum of ${num1} and ${num2} is ${num1 + num2}`;
console.log(result); 
// 输出: The sum of 5 and 3 is 8

在这个例子中，myTag 是模板标签函数。strings 参数是一个数组，包含了模板字面量中的文本片段：['The sum of ', ' and ', ' is ']。values 参数是一个包含嵌入表达式值的数组：[5, 3, 8]。模板标签函数通过遍历 strings 数组，并在适当的位置插入 values 数组中的值，构建出最终的字符串。

标签函数的工作原理

标签函数的调用时机是在模板字面量被解析时。当 JavaScript 引擎遇到一个带有标签的模板字面量时，它会将模板字面量解析成两个部分：文本片段和嵌入表达式的值。然后，它会调用标签函数，并将文本片段数组作为第一个参数，嵌入表达式的值作为后续参数传递给标签函数。

标签函数可以对这些参数进行任意处理，返回最终的字符串或其他值。这使得模板标签非常灵活，可以用于各种用途，比如字符串格式化、国际化、安全的 HTML 转义等。

字符串处理中的应用

  1. 字符串格式化
    • 模板标签可以用来创建自定义的字符串格式化函数。例如，我们可以创建一个函数，将字符串中的占位符替换为实际的值，并且可以指定一些格式化选项，比如数字的小数位数。
function format(strings, ...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            let value = values[i];
            if (typeof value === 'number') {
                value = value.toFixed(2);
            }
            result += value;
        }
    }
    return result;
}

const price = 10.5;
const quantity = 3;
const total = price * quantity;
const message = format`The total price for ${quantity} items at $${price} each is $${total}`;
console.log(message); 
// 输出: The total price for 3 items at $10.50 each is $31.50

在这个 format 函数中，我们检查如果值是数字类型，就将其格式化为保留两位小数的字符串。这样就实现了一个简单的字符串格式化功能。

  1. 国际化（i18n）
    • 在国际化场景中，模板标签可以用于根据不同的语言环境替换字符串中的占位符。假设我们有一个简单的国际化函数 i18n，它接受一个语言代码和一个模板字面量。
const translations = {
    en: {
        greeting: 'Hello, {name}!',
        goodbye: 'Goodbye, {name}!'
    },
    fr: {
        greeting: 'Bonjour, {name}!',
        goodbye: 'Au revoir, {name}!'
    }
};

function i18n(lang, strings, ...values) {
    let key = strings.join('');
    let translation = translations[lang][key];
    if (!translation) {
        return strings.join('');
    }
    for (let i = 0; i < values.length; i++) {
        translation = translation.replace(`{${i}}`, values[i]);
    }
    return translation;
}

const name = 'Alice';
const englishGreeting = i18n('en', `greeting`, name);
const frenchGoodbye = i18n('fr', `goodbye`, name);
console.log(englishGreeting); 
// 输出: Hello, Alice!
console.log(frenchGoodbye); 
// 输出: Au revoir, Alice!

在这个例子中，i18n 函数根据语言代码 lang 从 translations 对象中获取相应的翻译字符串，然后将模板字面量中的占位符 {name} 替换为实际的值。

  1. 安全的 HTML 转义
    • 在处理用户输入并将其插入到 HTML 中时，需要对特殊字符进行转义，以防止跨站脚本攻击（XSS）。模板标签可以用来创建一个安全的 HTML 插入函数。
function htmlEscape(str) {
    return str.replace(/[&<>"']/g, function (match) {
        switch (match) {
            case '&': return '&amp;';
            case '<': return '&lt;';
            case '>': return '&gt;';
            case '"': return '&quot;';
            case '\'': return '&#39;';
        }
    });
}

function safeHTML(strings, ...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += htmlEscape(values[i]);
        }
    }
    return result;
}

const userInput = '<script>alert("XSS")</script>';
const safeOutput = safeHTML`User input: ${userInput}`;
console.log(safeOutput); 
// 输出: User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

这里的 safeHTML 函数使用 htmlEscape 函数对用户输入的值进行转义，确保插入到 HTML 中的字符串是安全的。

高级模板标签应用

  1. 函数式编程风格的字符串处理
    • 模板标签可以与函数式编程概念相结合，实现更复杂的字符串处理。例如，我们可以创建一个函数，它接受多个转换函数作为参数，并依次对模板字面量中的值进行转换。
function transform(strings, ...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            let value = values[i];
            if (Array.isArray(value)) {
                for (let j = 0; j < value.length; j++) {
                    value[j] = value[j](value[j]);
                }
                value = value.join('');
            }
            result += value;
        }
    }
    return result;
}

function upperCase(str) {
    return str.toUpperCase();
}

function reverse(str) {
    return str.split('').reverse().join('');
}

const message = transform`${[upperCase, reverse]} World!`;
console.log(message); 
// 输出: DLROW World!

在这个例子中，transform 函数接受一个包含多个转换函数的数组作为模板字面量中的值。它会依次调用这些转换函数对值进行处理，这里先将字符串转换为大写，然后再反转。

  1. 构建动态 SQL 查询
    • 在数据库操作中，模板标签可以用于构建动态 SQL 查询。假设我们有一个简单的数据库查询构建函数 sqlQuery。
function sqlQuery(strings, ...values) {
    let query = '';
    for (let i = 0; i < strings.length; i++) {
        query += strings[i];
        if (i < values.length) {
            if (typeof values[i] ==='string') {
                query += `'${values[i]}'`;
            } else {
                query += values[i];
            }
        }
    }
    return query;
}

const table = 'users';
const condition = 'age > 18';
const selectQuery = sqlQuery`SELECT * FROM ${table} WHERE ${condition}`;
console.log(selectQuery); 
// 输出: SELECT * FROM users WHERE age > 18

这里的 sqlQuery 函数根据模板字面量和传入的值构建 SQL 查询字符串。它会对字符串类型的值进行适当的引号处理，以确保 SQL 查询的正确性。

模板标签与 ES6 特性结合

  1. 与解构赋值结合
    • 标签函数的参数可以使用解构赋值来更方便地处理。例如，我们可以将 strings 和 values 数组进一步解构。
function myTag([first,...rest],...values) {
    let result = first;
    for (let i = 0; i < rest.length; i++) {
        result += values[i] + rest[i];
    }
    return result;
}

const num1 = 10;
const num2 = 20;
const output = myTag`The sum of ${num1} and ${num2} is ${num1 + num2}`;
console.log(output); 
// 输出: The sum of 10 and 20 is 30

在这个 myTag 函数中，我们使用解构赋值将 strings 数组的第一个元素提取到 first 变量中，其余元素提取到 rest 数组中。这样可以更清晰地处理模板字面量中的文本片段。

  1. 与箭头函数结合
    • 可以使用箭头函数来定义模板标签函数，使代码更加简洁。
const myTag = (strings,...values) => {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += values[i];
        }
    }
    return result;
};

const name = 'Bob';
const greeting = myTag`Hello, ${name}!`;
console.log(greeting); 
// 输出: Hello, Bob!

这里使用箭头函数定义了 myTag 模板标签函数，它的功能与之前使用普通函数定义的类似，但代码更加紧凑。

模板标签的性能考虑

虽然模板标签提供了强大的功能，但在性能敏感的场景下，需要考虑其性能影响。模板标签的解析和函数调用会带来一定的开销。

  1. 解析开销
    • 当 JavaScript 引擎解析带有标签的模板字面量时，它需要将模板字面量拆分成文本片段和嵌入表达式的值。这个解析过程会消耗一定的时间和资源。特别是当模板字面量非常长，或者嵌入表达式非常复杂时，解析开销会更加明显。
  2. 函数调用开销
    • 调用标签函数本身也有一定的开销。标签函数的执行涉及到函数调用栈的操作，参数传递等。如果在一个循环中频繁使用模板标签，这种开销可能会累积，影响程序的性能。

为了优化性能，可以考虑以下几点：

  • 减少不必要的模板标签使用：如果只是简单的字符串拼接，使用传统的字符串拼接方法（如 + 运算符或 Array.join 方法）可能会更高效。
  • 缓存结果：如果模板标签的结果是固定的，或者在一定时间内不会改变，可以考虑缓存标签函数的返回值，避免重复计算。

例如，对于一个频繁使用的模板标签函数，我们可以使用缓存机制：

const cache = {};
function myTag(strings,...values) {
    const key = strings.join('') + values.join('');
    if (cache[key]) {
        return cache[key];
    }
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            result += values[i];
        }
    }
    cache[key] = result;
    return result;
}

// 多次调用，第一次计算并缓存，后续直接从缓存中获取
const result1 = myTag`Hello, ${'Alice'}!`;
const result2 = myTag`Hello, ${'Alice'}!`;

通过这种方式，可以减少模板标签函数的重复计算，提高性能。

模板标签与其他字符串处理方法对比

  1. 与传统字符串拼接对比
    • 可读性：模板标签的一大优势是可读性强。传统的字符串拼接使用 + 运算符，当拼接的部分较多时，代码会变得难以阅读。例如：
// 传统字符串拼接
const name = 'Charlie';
const message1 = 'Hello, ' + name + '! How are you today?';

// 模板标签
const message2 = `Hello, ${name}! How are you today?`;

很明显，使用模板标签的 message2 代码更清晰，更容易理解。

  • 功能扩展性：模板标签可以通过标签函数实现复杂的逻辑，如字符串格式化、国际化等。而传统字符串拼接要实现这些功能，需要编写更多的代码。例如，要实现简单的字符串格式化，使用模板标签可以这样做：
function format(strings,...values) {
    let result = '';
    for (let i = 0; i < strings.length; i++) {
        result += strings[i];
        if (i < values.length) {
            let value = values[i];
            if (typeof value === 'number') {
                value = value.toFixed(2);
            }
            result += value;
        }
    }
    return result;
}

const price = 15.256;
const quantity = 2;
const total = price * quantity;
const message3 = format`The total price for ${quantity} items at $${price} each is $${total}`;

如果使用传统字符串拼接，要实现同样的格式化功能，代码会更加繁琐。 2. 与 String.format 等库函数对比

  • 原生支持：模板标签是 JavaScript 语言原生支持的功能，不需要引入额外的库。而像 String.format 这样的函数，在 JavaScript 原生中并不存在，通常需要引入第三方库，如 sprintf-js 等。
  • 灵活性：模板标签可以通过自定义标签函数实现各种复杂的逻辑，而一些库函数可能只提供了有限的格式化选项。例如，sprintf-js 提供了类似于 C 语言 printf 函数的格式化功能，但对于一些特殊的字符串处理需求，可能无法直接满足，而模板标签可以根据具体需求定制标签函数。

模板标签在现代 JavaScript 框架中的应用

  1. React 中的应用
    • 在 React 中，虽然 JSX 提供了一种直观的方式来描述 UI，但模板标签也有其应用场景。例如，在处理国际化（i18n）时，可以使用模板标签来实现字符串的翻译。假设我们有一个 React 组件，需要根据用户的语言偏好显示不同的问候语。
import React from'react';

const translations = {
    en: {
        greeting: 'Hello, {name}!'
    },
    fr: {
        greeting: 'Bonjour, {name}!'
    }
};

function i18n(lang, strings,...values) {
    let key = strings.join('');
    let translation = translations[lang][key];
    if (!translation) {
        return strings.join('');
    }
    for (let i = 0; i < values.length; i++) {
        translation = translation.replace(`{${i}}`, values[i]);
    }
    return translation;
}

function Greeting({ name, lang }) {
    return <div>{i18n(lang, `greeting`, name)}</div>;
}

export default Greeting;

在这个例子中，i18n 函数使用模板标签的原理来实现字符串的翻译，Greeting 组件根据传入的 lang 和 name 显示相应语言的问候语。

  1. Vue 中的应用
    • 在 Vue 中，模板标签可以用于自定义指令的实现。例如，我们可以创建一个自定义指令，用于对输入的文本进行格式化。
<template>
    <div>
        <input v-model="inputValue" />
        <p v-formatted-text>`Formatted: ${inputValue}`></p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputValue: ''
        };
    },
    directives: {
        'formatted-text': function (el, binding) {
            let result = '';
            const strings = binding.value.split('${');
            for (let i = 0; i < strings.length; i++) {
                result += strings[i];
                if (i < strings.length - 1) {
                    let value = this.inputValue;
                    if (typeof value === 'number') {
                        value = value.toFixed(2);
                    }
                    result += value;
                }
            }
            el.textContent = result;
        }
    }
};
</script>

在这个 Vue 组件中，v - formatted - text 自定义指令使用了类似模板标签的逻辑，对输入的值进行格式化并显示在 <p> 标签中。

通过以上对 JavaScript 模板标签与字符串处理的深入探讨，我们可以看到模板标签在字符串处理方面提供了强大而灵活的功能，无论是在简单的字符串格式化，还是在复杂的国际化、安全 HTML 处理以及现代 JavaScript 框架中的应用，都有着广泛的用途。同时，我们也需要注意其性能影响，并在适当的场景下选择合适的字符串处理方法。