mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-29 05:42:20 +00:00
doc(string): edit 模板字符串
This commit is contained in:
parent
73cff90609
commit
b28145ef26
@ -750,10 +750,22 @@ var result = asyncReadFile();
|
|||||||
|
|
||||||
(4)返回值是Promise。`async`函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用`then`方法指定下一步的操作。
|
(4)返回值是Promise。`async`函数的返回值是Promise对象,这比Generator函数的返回值是Iterator对象方便多了。你可以用`then`方法指定下一步的操作。
|
||||||
|
|
||||||
进一步说,async函数完全可以看作多个异步操作,包装成的一个Promise对象,而`await`命令就是内部`then`命令的语法糖。
|
进一步说,`async`函数完全可以看作多个异步操作,包装成的一个Promise对象,而`await`命令就是内部`then`命令的语法糖。
|
||||||
|
|
||||||
正常情况下,`await`命令后面是一个Promise对象,否则会被转成Promise。
|
正常情况下,`await`命令后面是一个Promise对象,否则会被转成Promise。
|
||||||
|
|
||||||
|
下面是一个完整的例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
async function getTitle(url) {
|
||||||
|
let response = await fetch(url);
|
||||||
|
let html = await response.text();
|
||||||
|
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
|
||||||
|
}
|
||||||
|
getTitle('https://tc39.github.io/ecma262/').then(console.log)
|
||||||
|
// "ECMAScript 2017 Language Specification"
|
||||||
|
```
|
||||||
|
|
||||||
### async函数的实现
|
### async函数的实现
|
||||||
|
|
||||||
async 函数的实现,就是将 Generator 函数和自动执行器,包装在一个函数里。
|
async 函数的实现,就是将 Generator 函数和自动执行器,包装在一个函数里。
|
||||||
|
@ -468,7 +468,40 @@ var msg = `Hello, ${place}`;
|
|||||||
// "Hello World"
|
// "Hello World"
|
||||||
```
|
```
|
||||||
|
|
||||||
如果需要引用模板字符串本身,可以像下面这样写。
|
模板字符串甚至还能嵌套。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const tmpl = addrs => `
|
||||||
|
<table>
|
||||||
|
${addrs.map(addr => `
|
||||||
|
<tr><td>${addr.first}</td></tr>
|
||||||
|
<tr><td>${addr.last}</td></tr>
|
||||||
|
`).join('')}
|
||||||
|
</table>
|
||||||
|
`;
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码中,模板字符串的变量之中,又嵌入了另一个模板字符串,使用方法如下。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const data = [
|
||||||
|
{ first: '<Jane>', last: 'Bond' },
|
||||||
|
{ first: 'Lars', last: '<Croft>' },
|
||||||
|
];
|
||||||
|
|
||||||
|
console.log(tmpl(data));
|
||||||
|
// <table>
|
||||||
|
//
|
||||||
|
// <tr><td><Jane></td></tr>
|
||||||
|
// <tr><td>Bond</td></tr>
|
||||||
|
//
|
||||||
|
// <tr><td>Lars</td></tr>
|
||||||
|
// <tr><td><Croft></td></tr>
|
||||||
|
//
|
||||||
|
// </table>
|
||||||
|
```
|
||||||
|
|
||||||
|
如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// 写法一
|
// 写法一
|
||||||
@ -590,6 +623,12 @@ div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
|
|||||||
|
|
||||||
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
|
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
alert`123`
|
||||||
|
// 等同于
|
||||||
|
alert(123)
|
||||||
|
```
|
||||||
|
|
||||||
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
|
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -663,7 +702,7 @@ var total = 30;
|
|||||||
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
|
var msg = passthru`The total is ${total} (${total*1.05} with tax)`;
|
||||||
|
|
||||||
function passthru(literals) {
|
function passthru(literals) {
|
||||||
var result = "";
|
var result = '';
|
||||||
var i = 0;
|
var i = 0;
|
||||||
|
|
||||||
while (i < literals.length) {
|
while (i < literals.length) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user