在反应中将字符串中的每个单词大写 - Javascript

在JavaScript中，有时候我们需要对字符串中的每个单词进行操作，如将其转换为大写。以下是一种实现方式：

function upperCaseWords(str) {
  return str.replace(/\b\w+\b/g, function(word) {
    return word.toUpperCase();
  });
}

console.log(upperCaseWords("hello world")); // HELLO WORLD

上述代码中，我们使用了正则表达式 \b\w+\b 匹配字符串中的每个单词。\b 表示单词的边界，\w+ 表示一个或多个单词字符。

然后，我们使用 replace 方法将匹配到的每个单词替换为其大写形式。其中，第二个参数是一个函数，该函数接受匹配到的单词作为参数，并将其转换为大写形式。

最后，我们可以像下面这样调用 upperCaseWords 函数，并将其返回值打印出来：

console.log(upperCaseWords("hello world")); // HELLO WORLD

如果我们希望在 React 中使用这个函数，可以将其封装在一个组件中，如下所示：

import React from "react";

function UpperCaseWords({ text }) {
  function upperCaseWords(str) {
    return str.replace(/\b\w+\b/g, function(word) {
      return word.toUpperCase();
    });
  }

  return <div>{upperCaseWords(text)}</div>;
}

export default UpperCaseWords;

上述组件接受一个 text 属性作为参数，然后调用 upperCaseWords 函数将其中的每个单词转换为大写形式，并将结果显示在界面上。

我们可以像下面这样在其他组件中使用 UpperCaseWords 组件：

import React from "react";
import UpperCaseWords from "./UpperCaseWords";

function App() {
  return (
    <div>
      <UpperCaseWords text="hello world" />
    </div>
  );
}

export default App;

这样，就能够在 React 中使用 upperCaseWords 函数对字符串中的每个单词进行大写转换了。

参考链接：

• JavaScript 实现字符串大写字母