首頁 > web前端 > js教程 > 主體

如何在 JavaScript 中對字串進行排序?

WBOY
發布: 2023-09-09 12:29:02
轉載
2070 人瀏覽過

如何在 JavaScript 中对字符串进行排序?

排序字串是將字串依字典順序或字母順序排列。使用 JavaScript 開發應用程式時通常會對字串陣列進行排序。在本教程中,我們將學習在 JavaScript 中對字串進行排序。

例如,如果您從 API 獲取一些數據並希望按排序順序顯示該數據,則字串排序在這裡非常有用。

在這裡,我們將學習使用內建方法和各種簡單的方法對字串進行排序。

使用sort()方法對字串進行排序

在 JavaScript 中,sort() 是我們可以對陣列使用的內建方法。一般來說,在其他程式語言中,sort()方法預設會對數值進行排序。但是,JavaScript 將數字轉換為字串並按字母順序對它們進行排序。

因此,我們可以使用 JavaScript 的 sort() 方法而不使用比較器函數來對字串陣列進行排序。

文法

使用者可以依照下列語法使用 JavaScript 的 sort() 方法對字串進行排序。

Strings.sort();
登入後複製

在上面的語法中,我們使用字串陣列作為引用和 sort() 方法。

範例 1

在此範例中,我們定義了字串陣列並使用一些字串值對其進行初始化。之後,我們以數組為引用並執行數組的 sort() 方法。使用者可以觀察輸出結果,數組中的所有字串均按字母順序排序。

<html>
<body>
   <h2>Using the <i>sort() method</i> to sort an array of strings in JavaScript.</h2>
  <div id = "output"> </div>
  <script>
      let output = document.getElementById('output');
      let strings = ["Hi", "JavaScript", "TypeScript", "C", "CPP", "Python", "Java", "HTML", "CSS"];
      output.innerHTML += "The original string array is " + strings + "<br/>";
      strings.sort();
      output.innerHTML += "The sorted string array is " + strings + "<br/>";
   </script>
</body>
</html>
登入後複製

使用for迴圈對字串進行排序(冒泡排序演算法)

對字串進行排序的簡單方法是使用 for 迴圈。我們可以使用兩個巢狀的 for 迴圈將每個字串與所有其他字串進行比較,並按字母順序對它們進行排序。另外,我們可以說它是一種冒泡排序演算法。

文法

使用者可以按照下面的語法使用冒泡排序演算法對字串按字母順序進行排序。

for (let a = 0; a < strings.length; a++) {
   for (let b = a + 1; b < strings.length; b++) {
      if (strings[a] > strings[b]) {
         // swap strings at index a and index b
      }
   }
}

登入後複製

在上面的語法中,我們使用了兩個巢狀的 for 迴圈並迭代字串陣列。此外,我們還比較兩個字串值,並基於此交換字串。

演算法

第 1 步 - 建立字串陣列。

第 2 步 - 使用 for 迴圈並從第 0 個索引開始迭代字串陣列。

步驟 3 - 在 for 迴圈中,使用另一個 for 迴圈,並開始迭代第 a 1 個索引,此時 a 是第一個 for 迴圈的迭代指標。

第 4 步 - 現在,比較 ath 和 bth 索引處的字串。

步驟 5 - 如果第 ath 索引處的字串的字母順序大於第 b 個索引處的字串,則交換兩個字串。

第 6 步 - 完成兩個 for 迴圈的所有迭代,以按排序順序取得所有字串。

範例2(考慮字串字元的大小寫)

在下面的範例中,我們實作了冒泡排序演算法來對字串陣列進行排序。下面的輸出向我們展示了冒泡排序演算法對所有字串進行排序,其中大寫字母在小寫字母之前,因為在字串比較中大寫字母比小寫字母具有更高的優先級。

<html>
<body>
   <h2>Using the <i> bubble sort algorithm </i> to sort an array of strings in JavaScript.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      let strings = ["car", "Bike", "truck", "cycle", "Tempo", "cart", "abcd", "string"];
      output.innerHTML += "The original string array is " + strings + "<br/>";

      for (let a = 0; a < strings.length; a++) {
         for (let b = a + 1; b < strings.length; b++) {
            if (strings[a] > strings[b]) {
               let tempString = strings[a];
               strings[a] = strings[b];
               strings[b] = tempString;
            }
         }
      }  
      output.innerHTML += "The sorted string array is " + strings + "<br/>";
   </script>
</body>
</html>
登入後複製

範例3(忽略字串字元的大小寫)

在此範例中,我們實作了冒泡排序演算法來對字串進行排序,但我們比較的是小寫字串。在上面的範例中,我們根據字母順序對字串進行排序,並對大寫字母進行優先排序。但在這裡,我們忽略字串字元的大小寫並比較字串。

<html>
<body>
   <h2>Using the <i> bubble sort algorithm </i> to sort an array of strings in JavaScript.</h2>
   <div id = "output"> </div>
   <button onclick = "sortStrings()"> Sort Strings </button>
   <script>
      let output = document.getElementById('output');

      let strings = ["ab", "Bc", "AB", "AC", "cd", "ds", "ds", "erere", "DS"];
      output.innerHTML += "The original strings are " + strings + "<br/>";

      function sortStrings() {
         function swap(index1, index2) {
            let tempString = strings[index1];
            strings[index1] = strings[index2];
            strings[index2] = tempString;
         }

         for (let a = 0; a < strings.length; a++) {
            for (let b = a + 1; b < strings.length; b++) {
               if (strings[a].toLowerCase() > strings[b].toLowerCase()) {
                  swap(a, b)
               }
            }
         }
         output.innerHTML += "The sorted strings are " + strings + "<br/>";
      }
   </script>
</body>
</html>
登入後複製

我們在本教程中學習了對多個字串進行排序。在第一種方法中,我們使用了 sort() 方法,因為它始終按字母順序對字串進行排序。在第二種方法中,我們實作了冒泡排序演算法來對字串進行排序,但我們可以對其進行最佳化以提高時間效率。此外,我們可以使用其他演算法(例如合併排序)來提高排序演算法的時間和空間效率。

以上是如何在 JavaScript 中對字串進行排序?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板