在 React 中将字符串的首字母大写

作者

在 React 中将字符串的首字母大写

Capitalize the first letter of a String in React

在 React 中将字符串的第一个字母大写：

  1. 使用该charAt()方法获取字符串的第一个字母。
  2. 调用toUpperCase()信上的方法。
  3. 使用该slice()方法获取字符串的其余部分。
  4. 连接结果。
应用程序.js
// 👇️ if you need to capitalize first and lowercase rest
const capitalizeFirstLowercaseRest = str => {
  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};

export default function App() {
  // 👇️ if you only need to capitalize first letter
  const capitalizeFirst = str => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  };

  const str = 'alice';

  console.log(capitalizeFirst(str)); // 👉️ "Alice"
  return (
    <div>
      <h2>{capitalizeFirst(str)}</h2>
    </div>
  );
}

我们创建了 2 个可重用函数 –capitalizeFirstLowercaseRest和
capitalizeFirst.

该capitalizeFirstLowercaseRest函数将字符串的第一个字母转换为大写，其余字母转换为小写，而该capitalizeFirst
函数只是将字符串的第一个字母转换为大写。

我们传递给
String.charAt
方法的唯一参数是我们要获取的字符的索引。

索引在 JavaScript 中是从零开始的，这意味着字符串中第一个字符0的索引是 ，而最后一个字符的索引是 – 。 string.length - 1

然后我们使用
String.toUpperCase()
方法将 position 处的字符大写0。

应用程序.js
const capitalizeFirst = str => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

我们使用加法 (+) 运算符将第一个字符与字符串的其余部分连接起来。

我们传递给
String.slice
方法的唯一参数是起始索引——要包含在新字符串中的第一个字符的索引。

请注意，我们在 JSX 代码中将对函数的调用包装capitalizeFirst在花括号中。

应用程序.js
<h2>{capitalizeFirst(str)}</h2>

花括号标记必须计算的表达式的开始。

如果您只需在代码中执行一次，则不必创建将第一个字母大写的可重用函数。

应用程序.js
export default function App() {
  const str = 'alice';

  const result = str.charAt(0).toUpperCase() + str.slice(1);

  console.log(result); // 👉️ "Alice"
  return (
    <div>
      <h2>{result}</h2>
    </div>
  );
}

您也可以直接在 JSX 代码中执行此操作。

应用程序.js
export default function App() {
  const str = 'alice';

  return (
    <div>
      <h2>{str.charAt(0).toUpperCase() + str.slice(1)}</h2>
    </div>
  );
}

–