用React进行字符串插值的指南

简介

在处理字符串时，可能会出现这样的情况，即要求我们将一个特定的值动态地添加到这样的字符串中，使其仍然返回一个字符串，这样做的行为被称为字符串插值。

这个动态值可以是一个变量、状态或其他任何包含要嵌入字符串中的实际值的东西：

在本指南中，我们将研究如何在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 将被应用到标题上!

通过连接，我们将首先放置我们的实际字符串，然后利用+ 操作符将变量与实际字符串进行插值，因此它可以返回插值：

当我们是两个或更多的变量时，上述方法就会变得很复杂，尤其是当字符串被添加到另一个字符串中，而不是添加到最后的时候。

使用模板字面的字符串插值到React

这是处理字符串插值的最佳方法。它是在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>
   );
};

如何用模板字元插值多行字符串

正如我们前面所说，模板字面意义使我们很容易为多行的字符串添加占位符：

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>
   );
};

结论

在这篇文章中，我们学习了如何使用两种标准方法实现字符串插值，以及模板字面的强大功能。自从引入模板字面后，由于使用简单，代码的可读性明显提高，大多数人喜欢使用模板字面。