快速提示：如何在JavaScript中转换字符串的字符大小写

热门技术勘探工
237 阅读4分钟

快速提示：如何在JavaScript中转换字符串的字符大小写

在本教程中，你将学习如何使用本地JavaScript方法来转换字符串的大小写--大写、小写和标题大小写。

JavaScript提供了许多函数和方法，允许你为不同的目的处理数据。我们最近研究了将字符串转换为数字，将数字转换为字符串或序号，以及拆分字符串的方法。本文将介绍转换字符串的字符大小写的方法--这对于以某种格式表示字符串或进行可靠的字符串比较很有用。

将字符串转换为小写字母

如果你需要你的字符串是小写的，你可以使用字符串上可用的toLowerCase() 方法。这个方法返回所有字符为小写的字符串。

比如说

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

通过在str 变量上使用toLowerCase() 方法，你可以检索到所有字符都是小写的同一个字符串。注意，在不影响str 的值的情况下，会返回一个新的字符串。

将一个字符串转换为大写字母

如果你需要你的字符串是大写字母，你可以使用字符串上的toUpperCase() 方法。这个方法返回所有字符都是大写的字符串。

比如说

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

通过在str 变量上使用toUpperCase() 方法，你可以检索到所有字符都是大写的同一个字符串。注意，在不影响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方法，对数组中的每个项目应用你在前面例子中看到的转换。这样就把每个词都转换为标题大小写。

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

实例

在下面的CodePen演示中，你可以尝试一下toLowerCase() 和toUpperCase() 的功能。当你在输入框中输入一个字符串时，它将被转换为大写和小写并显示出来。你可以尝试在字符串中使用不同大小写的字符。

请参阅CodePen上SitePoint（@SitePoint）的Pen
在JavaScript中转换字符串的字符大小写
。

改变字符大小写以进行字符串比较

在许多情况下，你需要在执行一个代码块之前比较字符串。如果你不能控制字符串的大小写，在不执行任何字符大小写的情况下对字符串进行比较会导致意想不到的结果。

比如说：

const input = document.querySelector('input[type=text]');
if (input.value === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

如果用户输入的是Yes ，而不是yes ，那么平等条件就会失败，并且会出现错误的警告。

你可以通过在字符串上强制执行一个字符大小写来解决这个问题：

const input = document.querySelector('input[type=text]');
if (input.value.toLowerCase() === 'yes') {
  alert('Thank you for agreeing!');
} else {
  alert('We still like you anyway')
}

结论

学习如何在JavaScript中转换字符串的大小写是必要的。你经常需要在很多情况下使用它，比如以某种格式显示字符串。你还可以用它来可靠地比较字符串。

在你要比较的字符串上强制执行一个字符大小写，确保你可以检查字符串的内容是否相等，无论它们是如何写的。

avatar
文章
阅读
粉丝