ECMAScript6 模版字符串
三、模版字符串
JavaScript’s strings have been fairly limited when compared to those in other languages. Template strings add new syntax to allow the creation of domain-specific languages (DSLs) for working with content in a way that is safer than the solutions we have today. The description on the template string strawman was as follows
与其他的语言相比,js的字符串受到了很大的限制。模版字符串是新增加的语法允许创建开发领域特定语言(DSLs)来处理内容,使用这种方式比我们现在使用的解决办法更加安全。关于模版字符串的解释如下:
This scheme extends ECMAScript syntax with syntactic sugar to allow libraries to provide DSLs that easily produce, query, and manipulate content from other languages that are immune or resistant to injection attacks such as XSS, SQL Injection, etc.
这个计划通过“语法糖”的形式扩展了ECMAScript的语法,允许各种库提供DSLs语法,使得在其他语言内创建、查询和操作内容更加容易,可以免除和抵抗注入攻击例如XSS和SQL注入等。
In reality, though, template strings are ECMAScript 6’s answer to several ongoing problems in JavaScript:
实际上,模版字符串是ES6用来解决js中现存的几个问题的方法:
- Multiline strings - JavaScript has never had a formal concept of multiline strings.
- 多行字符串-js一直没有多行字符串的正式的概念。
- Basic string formatting - The ability to substitute parts of the string for values contained in variables.
- 基本的字符串格式化-能够替换变量中所包含的部分字符串的值
- HTML escaping - The ability to transform a string such that it is safe to insert into HTML.
- HTML转义-能够转化字符串这样插入到html中更加安全。
Rather than trying to add more functionality to JavaScript’s already-existing strings, template strings represent an entirely new approach to solving these problems.
不是在js已经存在的字符串上增加大量的功能,模版字符串展现出一种全新的解决这些问题的方法。
基本语法
At their simplest, template strings act like regular strings that are delimited by backticks (`
) instead of double or single quotes. For example:
最简单的,模版字符串和普通字符串一样,只不过界定符号是“`”而不是双引号或者单引号。例如:
let message = `Hello world!`; console.log(message); // "Hello world!" console.log(typeof message); // "string" console.log(message.length); // 12
This code demonstrates that the variable message
contains a normal JavaScript string. The template string syntax only is used to create the string value, which is then assigned to message
.
这段代码展示了变量message包含一个普通的js字符串。模版字符串的语法只是用来创建字符串值,接着赋值给message。
If you want to use a backtick in your string, then you need only escape it by using a backslash (\
):
如果你想在字符串中使用`,你需要通过凡斜杠(\)转义一下:
let message = `\`Hello\` world!`; console.log(message); // "`Hello` world!" console.log(typeof message); // "string" console.log(message.length); // 14
There’s no need to escape either double or single quotes inside of template strings.
在模版字符串内部,不需要转义单、双引号。
多行字符串
Ever since the first version of JavaScript, developers have longed for a way to create multiline strings in JavaScript. When using double or single quotes, strings must be completely contained on a single line. JavaScript has long had a syntax bug that would allow multiline strings by using a backslash (\
) before a newline, such as:
自从第一代js版本开始,开发者就渴望能够有一种方法在js中创建多行字符串。当使用单、双引号的时候,字符串必须包含在一行内。js长期以来都有一个语法错误-允许多行字符串在新的一行开始使用反斜杠(\),例如:
let message = "Multiline \ string";
Despite this working in all major JavaScripte engines, the behavior was defined as a bug and many recommended avoiding its usage.
尽管这种方式可以在所有的主要js引擎下工作,但是这种行为定义了一个bug,许多建议避免使用这种方式。
Other attempts to create multiline strings usually relied on arrays or string concatenation, such as:
其他的试图创建多行字符串通常依赖于数组和字符串连接,例如:
let message = [ "Multiline ", "string" ].join(""); let message = "Multiline " + "string";
All of the ways developers worked around JavaScript’s lack of multiline strings left something to be desired.
开发者所使用的这些方式都是因为js缺少多行字符串。
Template strings make multiline strings easy because there is no special syntax. Just include a newline where you want and it shows up in the result. For example:
模版字符串使得多行字符串变得简单因为没有什么特殊的语法。只是增加一个新行当你需要和希望在结果中显示的时候。例如:
let message = `Multiline string`; console.log(message); // "Multiline // string" console.log(message.length); // 16
All whitespace inside of the backticks is considered to be part of the string, so be careful with indentation. For example:
在``之内的所有空格都被认为是字符串的一部分,所以排版的时候要小心。例如:
let message = `Multiline string`; console.log(message); // "Multiline // string" console.log(message.length); // 31
In this code, all of the whitespace before the second line of the template string is considered to be a part of the string itself. If making the text line up with proper indentation is important to you, then you consider leaving nothing on the first line of a multiline template string and then indenting after that, such as this:
在这段代码中,模版字符串第二行之前的所有空格都被认为是字符串本身的一部分。如果正确的文本排列很重要,那么模版字符串第一行之前不要有任何内容然后在排版,例如:
let html = ` <div> <h1>Title</h1> </div>`.trim();
This code begins the template string on the first line but doesn’t have any text until the second. The HTML tags are indented to look correct and then the trim()
method is called to remove the initial (empty) line.
这段代码中,模版字符串从第一行开始但是直到第二行才有文本内容。HTML标签的排版看着是正确的接着使用trim方法删除第一行。