在过去的网页开发中，常常使用字符串拼接来构建大量的HTML代码。这种方式很容易出错，而且代码可读性差。ES6引入了template strings，让我们能够用一种更高效、更易读的方式构建大量的HTML代码。
Template strings 的基础
Template strings是一种新的字符串语法，它可以让我们在字符串中插入变量和表达式，并且可以跨越多行。它使用反引号`注明字符串的起始和结束，和单引号或双引号括起来的字符串有所不同。
const name = 'John'; const age = 30; const sentence = `Hello, my name is ${name} and I am ${age} years old.`; console.log(sentence); // Output: Hello, my name is John and I am 30 years old.
在上面的例子中，我们使用了变量name和age，并且在反引号内使用${}来展示它们的值。
Template strings可以包含任意JavaScript表达式，并且可以一起使用其他的字符串操作方法。
const numbers = [1, 2, 3]; const listItems = numbers.map(number => `<li>${number}</li>`).join(''); const html = `<ul>${listItems}</ul>`; console.log(html); // Output: <ul><li>1</li><li>2</li><li>3</li></ul>
在上面的例子中，我们使用了数组方法map和join来将数组numbers中的每个数字转换为一个li元素并拼接成一个字符串。然后，我们再将这个字符串放入<ul>标签中，并将结果存入变量html中。
Template strings 的神奇用途
Template strings不仅可以让我们在字符串中插入变量和表达式，还可以做一些更棒的事情：
多行字符串
使用Template strings，我们可以轻松地创建多行字符串，并且不用担心每一行结束的位置。
const multiLine = `This is a multi-line string`; console.log(multiLine); // Output: This is // a multi-line // string
在上面的例子中，我们使用Template strings创建了一个多行字符串multiLine，相比传统的字符串拼接方式代码更容易阅读。
嵌套
我们可以嵌套使用Template strings，在一些特殊的场景中，这会变得非常强大。
-- -------------------- ---- ------- ----- ------ - - ----- ------- -------- - ----- ---- ------ ------ ---- - -- ----- -------- - ------- -- ---- -- -------------- --- - ---- -- ----------------------- -------------------------- ---------------------- -- ------- ------ -- ---- -- ---- --- - ---- -- --- ----- ---展开代码
在上面的例子中，我们嵌套使用了Template strings展示了一个人的名字和地址，这种方式能够大大简化代码，同时让代码阅读起来也更加简单。
避免XSS攻击
在传统的字符串拼接方式中，我们需要手动转义HTML代码，以避免XSS攻击。使用Template strings，我们就无需担心这个问题了，因为所有的变量都被当作字符串来处理。
const userInput = '<script>alert("You are hacked!");</script>'; const html = `<div>${userInput}</div>`; console.log(html); // Output: <div><script>alert("You are hacked!");</script></div>
在上面的例子中，我们展示了一个包含了JavaScript代码的字符串，这种情况在传统的字符串拼接方式中可能会导致XSS攻击，但使用Template strings我们完美避免了这个问题。
小结
在本文中，我们简要介绍了ES6 Template strings的基础，并讨论了它的一些神奇用途。使用Template strings，我们可以更轻松地构建大量的HTML或JavaScript代码，代码可读性也得到了很好的提升。希望本文能为你的前端开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677fb8b0ce7f48612511bdc2
