JavaScript：初学者的模板文字和标记函数

最新推荐文章于 2022-10-10 17:04:27 发布

dfsgwe1231

最新推荐文章于 2022-10-10 17:04:27 发布

阅读量296

点赞数

文章标签： javascript ViewUI

我和其他人一样讨厌点击诱饵标题，但是请认真使用此“一个简单的技巧，可以立即提高代码的可读性”。

反t是你的朋友。

模板文字使用封闭的反引号（ ` ）代替单引号（ ' ）或双引号（ “ ）。

BOOM 。您现在可以编写模板文字：

console.log(`Hello World`); // "Hello World"

好吧，那是一个糟糕的例子。让我们用$ {}添加一个变量

var name = 'World'; console.log(`Hello ${name}`); // "Hello World"

好一点，但让我们备份一秒钟：

什么是“模板文字”？模板是一种“预设格式”，而文字是一种“完全按照其解释方式编写的值”。用JavaScript术语来说，模板文字是连接字符串的一种方式，同时允许嵌入表达式并提高可读性。

可读性和简洁代码

考虑这样的情况，我们要注销一个人的名字和昵称。使用模板字面量不仅意味着更少的代码，而且意味着更高的可读性：

var p = { name: 'Jackson', nn: 'Jak', }; // STRING CONCATENATION console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".'); // TEMPLATE LITERALS console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`); // "Hi, I'm Jackson! Call me 'Jak'."

在此示例中，有两个令人讨厌的功能字符串串联显示在我身上。用反斜杠转义撇号，并尝试用双引号和单引号找出字符串末尾发生的情况。模板字面量减轻了这两个问题，我们剩下的代码行要干净得多。

换行符是模板文字大放异彩的另一个领域：

// STRING CONCATENATION console.log("Dear Mom,\n" + "Hope you are well.\n" + "\tLove, your son") // TEMPLATE LITERALS console.log(`Dear Mom, Hope you are well. Love, your son`); // Dear Mom, // Hope you are well. // Love, your son

使用模板文字， 插入源中的任何换行符，制表符，空格等都将成为字符串的一部分 。这既可以是祝福，也可以是诅咒，但是在可读性方面绝对是一个加号。

另一个可读性示例。考虑将表达式添加到字符串：

// STRING CONCATENATION console.log('Three plus six is ' + (3 + 6) + '.'); // TEMPLATE LITERALS console.log(`Three plus six is ${3 + 6}.`); // "Three plus six is 9."

标记模板

标记模板是模板文字的另一个用例。带标签的模板是使用模板文字从中获取其参数的函数调用。

// TYPICAL FUNCTION function greet(){}; // TAG FUNCTION greet`I'm ${name}. I'm ${age} years old.`

如您所见，标记函数只是函数名称，后跟模板文字。但是标记功能纯粹是语法糖。使用上面的Tag函数等效于此：

// TAG FUNCTION greet`I'm ${name}. I'm ${age} years old.` // TAG FUNCTION greet`I'm ${name}. I'm ${age} years old.` // EQUIVALENT FUNCTION greet(["I'm ", ". I'm ", " years old."], name, age)

如您所见，标记函数是一种将模板文字作为参数传递给函数的简单方法。 tag函数将模板文字分解为参数数组。第一个参数将是一个字符串值数组。任何其他参数将按遇到的顺序成为变量。这是一个完整的示例，希望可以将这个想法带回家：

var name = 'Brandon'; var age = 26; function greet(){ console.log(arguments[0]); // ["I'm ", ". I'm ", " years old."] console.log(arguments[1]); // Brandon console.log(arguments[2]); // 26 }

var name = 'Brandon'; var age = 26; function greet(){ console.log(arguments[0]); // ["I'm ", ". I'm ", " years old."] console.log(arguments[1]); // Brandon console.log(arguments[2]); // 26 }

greet`I'm ${name}. I'm ${age} years old.`; greet`I'm ${name}. I'm ${age} years old.`;

如您所见，标记函数使用并“分解”了我们的模板文字。但是显然这个例子不是最有用的。让我们看一个是：

var name = 'Brandon'; var age = 26; function greet(arr, nameArg, ageArg) { console.log(arr[0] + nameArg + arr[1] + ageArg + arr[2]); } function greet(arr, nameArg, ageArg) { console.log(arr[0] + nameArg + arr[1] + ageArg + arr[2]); } greet`Woah, ${name} is ${age}?`; // "Woah, Brandon is 26?" greet`Woah, ${name} is ${age}?`; // "Woah, Brandon is 26?"

太酷了吧？当我们调用greet函数时，我们将模板文字作为唯一的参数传递。 Tag函数将模板文字分解为三个独立的参数。第一个参数是我们纯文本的数组。其余参数是模板文字表达式的显示顺序。然后，我们可以访问并安排所有这些参数以产生所需的线程！在这种情况下，我们将论点夹在数组和中提琴的中间–我们使文本说出我们想要说的话！