如何在 JavaScript 中转换字符串的字符大小写

4,580 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情

在本教程中,您将学习如何使用原生 JavaScript 方法将字符串的字符大小写转换为大写、小写和标题大小写。

将字符串转换为小写

如果您需要小写字符串,可以使用toLowerCase()字符串上可用的方法。此方法返回所有字符都为小写的字符串。

例如:

const str = 'HeLlO';
console.log(str.toLowerCase()); // "hello"
console.log(str); // "HeLlo"

通过toLowerCase()str变量使用方法,您可以检索所有字符都为小写的相同字符串。请注意,在不影响 的值的情况下返回了一个新字符串str

将字符串转换为大写

如果您需要大写字符串,可以使用toUpperCase()字符串上可用的方法。此方法返回所有字符均为大写的字符串。

例如:

const str = 'HeLlO';
console.log(str.toUpperCase()); // "HELLO"
console.log(str); // "HeLlo"

通过toUpperCase()str变量使用方法,您可以检索所有字符都为大写的相同字符串。请注意,在不影响 的值的情况下返回了一个新字符串str

将字符串转换为标题大小写

转换字符串大小写的最常见用例是将其转换为标题大小写。这可用于显示名称和标题。

有不同的方法可以做到这一点。一种方法是toUpperCase()在字符串的第一个字符上使用该方法,然后将其连接到字符串的其余部分。例如:

const str = 'hello';
console.log(str[0].toUpperCase() + str.substring(1).toLowerCase()); // "Hello"

在此示例中,您使用变量0上的索引检索第一个字符。然后,您使用该方法str将其转换为大写。toUpperCase()最后,您使用该substr()方法检索字符串的其余部分,并将字符串的其余部分连接到第一个字母。您toLowerCase()对字符串的其余部分应用以确保它是小写的。

这只会将单词的第一个字母转换为大写。但是,在某些情况下,如果您有一个句子,您可能希望将句子中的每个单词都转换为大写。在这种情况下,最好使用这样的函数:

function toTitleCase (str) {
  if (!str) {
    return '';
  }
  const strArr = str.split(' ').map((word) => {
    return word[0].toUpperCase() + word.substring(1).toLowerCase();
  });
  return strArr.join(' ');
}

const str = 'hello world';
console.log(toTitleCase(str)); // "Hello World"

toTitleCase()函数接受一个参数,即要转换为标题大小写的字符串。

在函数中,您首先检查字符串是否为空,在这种情况下返回一个空字符串。

然后,您在空格分隔符上拆分字符串,这将返回一个数组。之后,您使用数组上的map方法将您在前面示例中看到的转换应用于数组中的每个项目。这会将每个单词转换为标题大小写。

最后,通过相同的空格分隔符将数组中的项目连接成一个字符串并返回它。

现场示例

在下面的演示中,你可以使用toLowerCase()和的功能toUpperCase()。当您在输入中输入字符串时,它会转换为大写和小写并显示。您可以尝试在字符串中使用不同大小写的字符。

更改字符串比较的字符大小写

在许多情况下,您需要在执行代码块之前比较字符串。如果您无法控制写入字符串的字符大小写,则在不强制任何字符大小写的情况下对字符串执行比较可能会导致意外结果。

例如:

const input = document.querySelector('input[type=text]');
if (input.value === 'yes') {
  alert('同意');
} else {
  alert('拒绝')
}

如果用户输入输入Yes而不是yes,则相等条件将失败并显示错误警报。

您可以通过对字符串强制使用大小写来解决此问题:

const input = document.querySelector('input[type=text]');
if (input.value.toLowerCase() === 'yes') {
  alert('同意');
} else {
  alert('拒绝')
}

结论

有必要学习如何在 JavaScript 中转换字符串的字符大小写。您经常需要将它用于许多用例,例如以某种格式显示字符串。您还可以使用它来可靠地比较字符串。

对要比较的字符串强制区分大小写可确保您可以检查字符串的内容是否相等,而不管它们是如何编写的。

往期精彩

最常用的 9 个JavaScript 函数与示例

JS中reduce的5种使用方法

使用CSS 为网站创建 打字机效果

使用纯CSS编写确认的删除按钮