跳至主内容

do 表达式提案插件

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

详情​

do { .. } 表达式会执行一个代码块（包含一条或多条语句），代码块中最后一条语句的完成值将成为整个 do 表达式的完成值。

摘自 You Don't Know JS 的《类型与语法》→ 第 5 章 → 语句完成值一节

可以将其视为三元运算符的复杂版本：

JavaScript
let a = do {
  if (x > 10) {
    ("big");
  } else {
    ("small");
  }
};
// is equivalent to:
let a = x > 10 ? "big" : "small";

这个示例并非最佳实践，因为场景过于简单，使用三元运算符更合适。但在 do { ... } 表达式中，你可以处理更复杂的条件逻辑，例如包含多个 if ... else 链的情况：

JavaScript
let x = 100;
let y = 20;

let a = do {
  if (x > 10) {
    if (y > 20) {
      ("big x, big y");
    } else {
      ("big x, small y");
    }
  } else {
    if (y > 10) {
      ("small x, big y");
    } else {
      ("small x, small y");
    }
  }
};

示例​

在 JSX 中的应用​

do 表达式最有价值的应用场景之一是在 JSX 内部。当需要条件化渲染组件时，通常需要额外封装条件判断函数，例如：

JavaScript
const getColoredComponent = color => {
  if (color === "blue") {
    return <BlueComponent />;
  }
  if (color === "red") {
    return <RedComponent />;
  }
  if (color === "green") {
    return <GreenComponent />;
  }
};

const Component = props => (
  <div className="myComponent">{getColoredComponent()}</div>
);

使用 do 表达式可以直接在 JSX 中嵌入逻辑：

JavaScript
const Component = props => (
  <div className="myComponent">
    {do {
      if (color === "blue") {
        <BlueComponent />;
      } else if (color === "red") {
        <RedComponent />;
      } else if (color === "green") {
        <GreenComponent />;
      }
    }}
  </div>
);

安装​

npm install --save-dev @babel/plugin-proposal-do-expressions

用法​

通过配置文件（推荐）​

babel.config.json
{
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

通过命令行​

Shell
babel --plugins @babel/plugin-proposal-do-expressions script.js

通过 Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-proposal-do-expressions"],
});

参考​