使用 React 進行字符串插值的指南

簡介

在處理字符串時，可能會出現需要我們動態地將特定值添加到此類字符串中以使其仍返回字符串的情況，這種行為稱為字符串插值。

此動態值可以是變量、狀態或任何其他包含要嵌入到字符串中的實際值的內容。

ES5 和 ES6 中的字符串插值

字符串插值可以通過兩種方式完成：連接和模板文字。雖然有些人認為串聯不是字符串插值，但字符串插值是指通過佔位符替換來創建字符串的能力，串聯顯然是這樣做的。

在 ES6 中引入模板文字之前，我們一直使用連接，這在處理需要替換許多變量的多行字符串時變得非常困難。當 ES6 中引入模板文字時，它們被證明更容易實現，尤其是對於我們想要嵌入表達式的較長或多行字符串。

在本指南中，我們將查看這兩種方法，然後使用模板文字執行一些示例，這是推薦的方法。

React 中的字符串插值與串聯

連接的標準方法是使用 + 圍繞特定變量或狀態的運算符：

const App = () => {
   const [fontSize] = useState('large');
   return (
      <div className="container">
         <h1 className={"font-bold text-" + fontSize}>Hello World</h1>
      </div>
   );
};

在上面的代碼中，我們有 fontSize 的狀態 其值為 large .我們希望動態獲取該類 - 例如它可以是 text-small , text-large , text-medium 等。根據狀態，不同的 className 因此將應用於標題！

通過連接，我們將首先放置我們的實際字符串，然後使用 + 運算符用實際字符串插入變量，因此它可以返回插入值：

當我們是兩個或多個變量時，上述方法會變得複雜，尤其是當字符串被添加到另一個字符串中時，而不是添加到末尾。

字符串插值與模板文字反應

這是處理字符串插值的最佳方法。它是在 ES6 中添加的，此後成為字符串插值最常用的方法。使用字符串模板文字，讓我們重複前面的示例：

const App = () => {
   const [fontSize] = useState('large');
   return (
      <div className="container">
         <h1 className={`font-bold text-${fontSize}`}>Hello World</h1>
      </div>
   );
};

正如我們在上面的代碼中看到的，我們不再在模板文字中使用加號運算符，而是對整個字符串使用反引號，然後使用美元符號和花括號插入我們的變量和動態值。

該語句被評估並 const fontSize 被插入到字符串中。

讓我們再看一些 React 字符串插值示例！

如何利用字符串插值在 React 中傳遞樣式值

在我們將樣式數據存儲在一個變量中的情況下，我們希望使用該變量在 React 內部設置文本樣式，我們可以使用模板文字：

const App = () => {
   const textSize = 40;
   return (
      <div className="container">
         <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1>
      </div>
   );
};

正如我們之前所說，美元符號和花括號用於保存我們的佔位符，這將以正確的方式返回樣式：

我們還可以在花括號內執行求值，假設我們希望數字相乘：

<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>

如何在 React 中通過表達式使用字符串插值

到目前為止，我們已經看到我們可以執行評估；還需要注意的是，我們可以在花括號內添加表達式，以根據表達式獲取正確的值並使用它：

const App = () => {
   const [showNav, setShowNav] = useState(true);
   return (
      <div className="container">
         <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div>
      </div>
   );
};

如何使用模板文字插入多行字符串

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

正如我們之前所說，模板文字可以很容易地為多行字符串添加佔位符：

const App = () => {
   let user = {
      name: 'John Doe',
      age: 14,
      hobby: 'basket ball',
   };

   let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`;

   return (
      <div className="container">
         <div>
            <p>{sentence}</p>
         </div>
      </div>
   );
};

在上面的代碼中，我們看到使用模板字面量與使用連接相比是多麼容易：

let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";

如何在模板文字中使用邏輯運算符

到目前為止，我們已經了解瞭如何使用三元運算符傳遞表達式，最好我們還可以看到邏輯運算符也可以與模板文字一起使用：

const App = () => {
   const [showNav, setShowNav] = useState(true);
   return (
      <div className="container">
         <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div>
      </div>
   );
};

結論

我們在本文中學習瞭如何使用兩種標準方法實現字符串插值，以及模板文字的強大功能。自從引入模板文字以來，大多數人更喜歡使用它們，因為它使用簡單，代碼可讀性顯著提高。