mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2024-04-21 12:32:22 +00:00
docs: edit generator
This commit is contained in:
+24
-11
@@ -354,18 +354,18 @@ ES7推出了字符串补全长度的功能。如果某个字符串不够指定
|
||||
传统的JavaScript语言,输出模板通常是这样写的。
|
||||
|
||||
```javascript
|
||||
$("#result").append(
|
||||
"There are <b>" + basket.count + "</b> " +
|
||||
"items in your basket, " +
|
||||
"<em>" + basket.onSale +
|
||||
"</em> are on sale!"
|
||||
$('#result').append(
|
||||
'There are <b>' + basket.count + '</b> ' +
|
||||
'items in your basket, ' +
|
||||
'<em>' + basket.onSale +
|
||||
'</em> are on sale!'
|
||||
);
|
||||
```
|
||||
|
||||
上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。
|
||||
|
||||
```javascript
|
||||
$("#result").append(`
|
||||
$('#result').append(`
|
||||
There are <b>${basket.count}</b> items
|
||||
in your basket, <em>${basket.onSale}</em>
|
||||
are on sale!
|
||||
@@ -390,7 +390,7 @@ var name = "Bob", time = "today";
|
||||
`Hello ${name}, how are you ${time}?`
|
||||
```
|
||||
|
||||
上面代码中的字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
|
||||
上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
|
||||
|
||||
```javascript
|
||||
var greeting = `\`Yo\` World!`;
|
||||
@@ -399,13 +399,26 @@ var greeting = `\`Yo\` World!`;
|
||||
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
|
||||
|
||||
```javascript
|
||||
$("#warning").html(`
|
||||
<h1>Watch out!</h1>
|
||||
<p>Unauthorized hockeying can result in penalties
|
||||
of up to ${maxPenalty} minutes.</p>
|
||||
$('#list').html(`
|
||||
<ul>
|
||||
<li>first</li>
|
||||
<li>second</li>
|
||||
</ul>
|
||||
`);
|
||||
```
|
||||
|
||||
上面代码中,所有模板字符串的空格和换行,都是被保留的,比如`<ul>`标签前面会有一个换行。如果你不想要这个换行,可以使用`trim`方法消除它。
|
||||
|
||||
|
||||
```javascript
|
||||
$('#list').html(`
|
||||
<ul>
|
||||
<li>first</li>
|
||||
<li>second</li>
|
||||
</ul>
|
||||
`.trim());
|
||||
```
|
||||
|
||||
模板字符串中嵌入变量,需要将变量名写在`${}`之中。
|
||||
|
||||
```javascript
|
||||
|
||||
Reference in New Issue
Block a user