跳到主要內容

@babel/plugin-proposal-do-expressions

詳細資訊​

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"]
}

透過 CLI​

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

透過 Node API​

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

參考資料​