请解释这段ECMAScript生成器代码及${name}语法

数据老陈

2026-5-28

解析这段ECMAScript生成器代码的逻辑、执行流程，以及${name}语法详解

Hey there! Let's break down this ECMAScript generator code step by step, and clear up exactly how that ${name} syntax works too.

先理解核心：这是个生成器函数

首先，function* ask()是一个生成器函数——和普通函数不一样，它不会一次性执行完，而是可以通过yield关键字暂停执行，之后再恢复，还能在暂停/恢复的过程中传递数据，非常适合处理分步交互或者异步流程。

我们把代码里的执行步骤拆开来，看每一次it.next()到底做了什么：

const it = ask();

调用生成器函数ask()不会立刻执行函数体，而是返回一个生成器迭代器对象it，我们通过这个对象的next()方法来控制函数的执行。

console.log(it.next());

调用next()后，生成器开始执行函数体，直到遇到第一个yield语句：

const name = yield "What is your name?";

此时函数暂停执行，把yield后面的字符串"What is your name?"作为返回值的value，同时标记done: false表示函数还没执行完。所以这次输出的是：

{ value: "What is your name?", done: false }

注意：这时候name还没有被赋值，因为yield在这里是暂停点，赋值操作要等下次恢复执行时才会完成。

console.log(it.next('Ethan'));

这次调用next()时传入了参数'Ethan'——这个参数会被当作上一个yield表达式的返回值，也就是把'Ethan'赋值给name。之后函数继续执行，直到遇到第二个yield语句：

const sport = yield "What is your favorite sport?";

函数再次暂停，返回"What is your favorite sport?"作为value，done: false。所以这次输出的是：

{ value: "What is your favorite sport?", done: false }

console.log(it.next('Cricket'));

同样，传入的'Cricket'会作为第二个yield表达式的返回值，赋值给sport。函数继续执行到return语句，把模板字符串的结果作为返回值的value，同时标记done: true表示生成器已经执行完毕。这次输出的是：

{ value: "Ethan's favorite sport is Cricket", done: true }

你提到的${name}是ECMAScript 6引入的模板字符串插值语法，专门用来简化字符串拼接，用法和细节如下：

基础用法：模板字符串用反引号`包裹（不是单引号或双引号），${}里面可以放变量、常量或者任意JavaScript表达式，它会自动把里面的内容转换成字符串，然后插入到模板的对应位置。
比如：
```
const name = "Ethan";
const greeting = `Hello, ${name}!`; // 结果是 "Hello, Ethan!"
```

支持表达式：除了变量，你还可以在${}里写运算、函数调用等表达式：

const a = 10;
const b = 20;
const result = `10 + 20 = ${a + b}`; // 结果是 "10 + 20 = 30"

对比普通字符串拼接：之前要拼接字符串需要用+号，还要处理类型转换，比如：

// 旧写法
const oldGreeting = "Hello, " + name + "!";
// 模板字符串写法更简洁直观
const newGreeting = `Hello, ${name}!`;

内容的提问来源于stack exchange，提问作者kvinbabbar