如何在JavaScript中进行不区分大小写的字符串比较

在本教程中，我们将学习如何在JavaScript中进行不区分大小写的字符串比较。不区分大小写意味着即使单词或字符串以小写或大写形式编写，其含义也相同。这种不区分大小写的比较在谷歌搜索栏中很常见，例如，用户键入“tUtoriAlsPOint”或“Tutorialspoint”，结果相同，搜索栏中也使用了类似的方法。共有四种方法可以实现这一点：

  • toUpperCase()

  • toLowerCase()

  • localeCompare()

  • RegExp()

使用toUpperCase()方法

当我们对字符串使用toUpperCase()方法时，字符串将转换为全大写字符串。对数字、特殊字符（{, }, >, $ 等）以及已经是大写的字母不会进行任何更改。

语法

str.toUpperCase();

参数

  • str − 需要转换为大写的文本

示例

在下面的示例中，我们选择了两个相同的字符串，但大小写不同（小写和大写）。我们在比较它们之前，使用toUpperCase()方法将这两个字符串转换为大写。

<html>
<body>
   <h2>Case insensitive comparison using <i>toUpperCase()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "TexT with uPPer CAsE aND loWeR cASe";
      var str2 = "TexT with Upper Case aND LoWER CAse";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1+ "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      if (str1.toUpperCase() === str2.toUpperCase()) {
         output.innerHTML += "The strings are converted to Uppercase and they are equal" + "<br/>";
      } else {
         output.innerHTML += "The strings are converted to Uppercase and they are not equal";
      }
   </script>
</body>
</html>

使用toLowerCase()方法

与toUpperCase()类似，此方法将字符串转换为全小写字符串。对数字、特殊字符（{, }, >, $ 等）以及已经是小写的字母不会进行任何更改。

语法

str.toLowerCase();

参数

  • str − 将转换为小写的文本

示例

在下面的示例中，我们使用了两个相同的字符串，但大小写不同（小写和大写）。在相互比较之前，使用toLowerCase()方法将这两个字符串都转换为小写。

<html>
<body>
   <h2>Case insensitive comparison using <i>toLowerCase()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "TutorialsPoint";
      var str2 = "tuTorialspoInt";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      if (str1.toLowerCase() === str2.toLowerCase()) {
         output.innerHTML += "The strings are converted to Lowercase and they are equal";
      } else {
         output.innerHTML += "The strings are converted to Uppercase and they are not equal";
      }
   </script>
</body>
</html>

使用localeCompare()方法

localeCompare()方法返回一个数字（可能是0、负数或正数），指示参考字符串在排序顺序中是在给定字符串之前、之后还是与之相同。当可能需要比较两种不同语言时，这是一个更好的选择，我们可以根据需要自定义比较。

语法

localeCompare(compareString, locales, options)

参数

  • compareString − 将参考字符串与此字符串进行比较

  • locales − 语言标签。

  • options − 应输入您正在使用的特定区域设置。

示例

在下面的示例中，我们选择了两个相同的字符串，但大小写和语言不同。localeCompare()在比较这两个字符串后，如果两个字符串相等，则返回0。

<html>
<body>
   <h2>Case insensitive comparison using <i>localeCompare()</i> method</h2>
   <div id="str1"></div>
   <script>
      var str1 = "apPlE";
      var str2 = "áppLE";
      var output = document.getElementById("str1");
      function caseInsensitive(a, b) {
         return a.localeCompare(b, 'en', {
            sensitivity: 'base'
         }) === 0;
      }
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      output.innerHTML += "str1 === str2 is " + caseInsensitive(str1, str2);
   </script>
</body>
</html>

使用RegExp()对象

RegExp() 代表正则表达式，它是一种用于模式匹配的字符模式。在这种情况下，我们使用test()函数进行搜索，并查看模式是否与提供的文本匹配。如果文本匹配，则函数将返回true。

语法

RegExp('^' + str + '$', 'i')

参数详情

  • ^ − 字符串的开头。

  • $ − 字符串的结尾。

  • str − 需要遵循的模式。

  • i − 标志变量，表示在将模式与字符串匹配时是否应忽略大小写。

示例

在这个例子中，我们使用RegExp()对象创建一个模式，并使用test()函数查看模式是否与字符串匹配。test()函数根据比较和字符串返回布尔值。

<html>
<body>
   <h2>Case insensitive comparison using <i>RegEx()</i> object</h2>
   <div id="str1"></div>
   <script>
      var str1 = "tutorialspoint";
      var str2 = "TUTORIALSPOINT";
      var output = document.getElementById("str1");
      output.innerHTML += "str1 = " + str1 + "<br/>";
      output.innerHTML += "str2 = " + str2 + "<br/>";
      let pattern = new RegExp('^' + str1 + '$', 'i');
      if (pattern.test(str2)) {
         output.innerHTML += "str1 and str2 are same";
      } else {
         output.innerHTML += "str1 and str2 are not same";
      }
   </script>
</body>
</html>

更新于：2022年8月23日

1K+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告