TypeScript入门教程之模板字符串

最新推荐文章于 2024-05-20 00:30:00 发布

星河_赵梓宇

最新推荐文章于 2024-05-20 00:30:00 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/Aria_Miazzy/article/details/105660281

版权

TypeScript入门教程之模板字符串

模板文字（模板字符串）

从语法上讲，这些是使用反引号（即`）而不是单引号（'）或双引号（“）引号的字符串。Template Literals的动机有三方面：

字符串插值
多行字符串
标记模板

字符串插值

另一个常见的用例是当您想从某些静态字符串+一些变量中生成一些字符串时。为此，您将需要一些模板逻辑，这就是模板字符串最初来自其名称的位置。从那以后，它们被正式重命名为模板文字。这是您之前可能生成html字符串的方式：

var lyrics = 'Never gonna give you up';
var html = '<div>' + lyrics + '</div>';

现在，使用模板文字，您可以执行以下操作：

var lyrics = 'Never gonna give you up';
var html = `<div>${lyrics}</div>`;

请注意，插值（${和}）内的任何占位符都将被视为JavaScript表达式并进行评估，例如，您可以进行数学运算。

console.log(`1和1使${1 + 1}`);

多行文字

是否曾经想过在JavaScript字符串中添加换行符？也许您想嵌入一些歌词？您将需要使用我们最喜欢的转义字符对文字换行符进行转义\，然后\n在下一行手动将新行放入字符串中。如下所示：

var lyrics = "Never gonna give you up \
\nNever gonna let you down";

使用TypeScript，您可以仅使用模板字符串：

var lyrics = `Never gonna give you up
Never gonna let you down`;

标记模板

您可以tag在模板字符串之前放置一个函数（称为a ），它有机会预处理模板字符串文字和所有占位符表达式的值并返回结果。一些注意事项：

所有静态文字都作为数组传递给第一个参数。
占位符表达式的所有值都作为其余参数传递。通常，您只需要使用rest参数将它们也转换为数组。

这是一个示例，其中我们有一个标记函数（名为htmlEscape），可以从所有占位符处转义html：

var say = "a bird in hand > two in the bush";
var html = htmlEscape `<div> I would just like to say : ${say}</div>`;

// a sample tag function
function htmlEscape(literals: TemplateStringsArray, ...placeholders: string[]) {
    let result = "";

    // interleave the literals with the placeholders
    for (let i = 0; i < placeholders.length; i++) {
        result += literals[i];
        result += placeholders[i]
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    // add the last literal
    result += literals[literals.length - 1];
    return result;
}

注意：您可以注释placeholders为any []。不管您以何种方式对其进行注释，TypeScript都会进行类型检查，以确保用于调用标签的占位符与注释匹配。例如，如果您希望处理string或numbers，则可以进行注释...placeholders:(string | number)[]