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