如何在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+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告