React 中的字串插值

1. ECMAScript 5 (ES5) 中的 React 字串插值
2. ECMAScript 6+ (ES6+) 中的 React 字串插值

前端開發人員可以使用 React 以宣告方式構建具有視覺吸引力的使用者介面。React 程式碼並不是那麼簡單，尤其是如果你是初學者。

在某些時候，所有 React 專案都達到了複雜程度，它們要求你將簡單的值（如字串）和來自 state 或 props 的動態值組合在一起。

有多種方法可以在 JavaScript 中組合靜態和動態值。幸運的是，ES6 引入了模板文字，它可能提供了組合字串和變數值的最簡單方法。

但是，仍然可以在不使用現代 ES6 特性的情況下進行字串插值。

ECMAScript 5 (ES5) 中的 React 字串插值

假設你有一個 state 屬性來儲存文字的大小。你可能需要通過將常規字串與狀態變數組合來建立自定義類。

讓我們看看如何使用傳統的 JavaScript 來做到這一點。

export default function App() {
  const [size, setSize] = useState("medium");
  return <div className={"font-" + size}>A sample content</div>;
}

一切都很順利，因為我們將字串與字串值變數連線起來。然而，即使我們的變數包含一個數值，JavaScript 也會自動將其轉換為字串。

如果你在 CodeSandbox 上執行此程式碼並檢視原始檔，你會看到 class 屬性設定為組合值。

ECMAScript 6+ (ES6+) 中的 React 字串插值

還有另一種使用現代 JavaScript 的模板文字（也稱為反引號）進行字串插值的方法。這樣，你可以將整個值引用為一個字串，並且可以告訴 JavaScript 獲取特定部分的變數值。

我們的示例相當簡單，因此差異可能不會那麼令人印象深刻。但是，如果使用涉及多個變數的長字串會產生很大的不同。

讓我們看一個例子。

export default function App() {
  const [size, setSize] = useState("medium");
  return <div className={`font- + ${size}`}>A sample content</div>;
}