如何用JavaScript排序包含字母的數(shù)字字符串

日常開發(fā)中，我們經(jīng)常會遇到需要對帶字母的數(shù)字字符串進(jìn)行排序的場景。比如，在電商網(wǎng)站中，我們需要對包含商品編號的字符串進(jìn)行排序，這些編號可能既有數(shù)字部分又有字母部分。今天，我就來給大家分享一個簡單易懂的方法，用JavaScript實現(xiàn)這樣的排序。

需求場景

想象一下，我們在開發(fā)一個庫存管理系統(tǒng)，需要對一系列商品編號進(jìn)行排序。這些商品編號是由數(shù)字和字母組成的，例如 12A, 2A, B3, 12B, C1。如果我們按照默認(rèn)的字符串排序方式，結(jié)果往往不是我們想要的。這時候，我們就需要一種能正確處理這種帶字母數(shù)字字符串的排序方法。

方法一：使用localeCompare

JavaScript中的localeCompare方法可以幫助我們實現(xiàn)這一需求。它不僅可以比較字符串，還能根據(jù)需要進(jìn)行數(shù)字排序。下面是具體的實現(xiàn)代碼：

const items=[
  '12A',
  '2A',
  'B3',
  '12B',
  'C1',
  'A21',
  '21B',
  'B19',
  'C3',
  'D2'
];

const sortedItems=items.sort((a, b)=> {
  return a.localeCompare(b, undefined, {
    numeric: true,
    sensitivity: 'base'
  });
});

console.log(sortedItems);

在這個例子中，我們創(chuàng)建了一個包含商品編號的數(shù)組items。然后，我們使用sort方法對數(shù)組進(jìn)行排序，并在排序函數(shù)中調(diào)用localeCompare方法。設(shè)置numeric為true可以使數(shù)字部分按照數(shù)值大小排序，而sensitivity設(shè)置為base則忽略大小寫進(jìn)行比較。

排序后的結(jié)果是：

[ '2A',  '12A', '12B',
  '21B', 'A21', 'B3',
  'B19', 'C1',  'C3',
  'D2']

方法二：使用Intl.Collator

另一種方法是使用Intl.Collator構(gòu)造函數(shù)創(chuàng)建一個比較器實例，它同樣能夠?qū)ψ址M(jìn)行自然排序。下面是具體實現(xiàn)：

const items=[
  '12A',
  '2A',
  'B3',
  '12B',
  'C1',
  'A21',
  '21B',
  'B19',
  'C3',
  'D2'
];

const collator=new Intl.Collator(undefined, {
  numeric: true,
  sensitivity: 'base'
});

const sortedItems=items.sort((a, b)=> {
  return collator.compare(a, b);
});

console.log(sortedItems);

這個方法和localeCompare類似，只是我們通過Intl.Collator創(chuàng)建了一個比較器實例，并使用它的compare方法來進(jìn)行排序。

排序后的結(jié)果與之前相同：

[
  '2A',  '12A', '12B',
  '21B', 'A21', 'B3',
  'B19', 'C1',  'C3',
  'D2'
]

結(jié)束

通過使用localeCompare和Intl.Collator方法，我們可以輕松地對帶字母的數(shù)字字符串進(jìn)行自然排序。這不僅在電商網(wǎng)站的商品編號排序中非常實用，在處理任何包含數(shù)字和字母的字符串排序時都能派上用場。

i列表排序

<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function (){
    var oUl1=document.getElementById('ul1');
    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function (){
    var aLi=oUl1.getElementsByTagName('li');
    //aLi.sort(); 此方法不可行,因為aLi是元素集合,不是數(shù)組,sort()只能用于數(shù)組排序
    var arr=[];

    for(var i=0;i<aLi.length;i++){
    arr[i]=aLi[i]; //aLi元素集合轉(zhuǎn)換為數(shù)組
    }

    arr.sort(function (li1, li2){ //自定義排序函數(shù)
    var n1=parseInt(li1.innerHTML); //將字符串轉(zhuǎn)換為整數(shù)
    var n2=parseInt(li2.innerHTML);
    return n1-n2;
    });
    //alert(arr[0].innerHTML);
    for(var i=0;i<arr.length;i++){
    //alert('該把'+arr[i].innerHTML+'插入到最后');
    oUl1.appendChild(arr[i]);
    }
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>

appendChild()方法理解:

target.appendChild(newnode)

1.先把元素從原有父級上刪掉

2.添加到原有的父級元素下, 起到了移動子元素的作用。

值類型排序

console.log([5,6,2,3].sort())

字符串類型的數(shù)組排序

console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#'].sort())

雖然排序了，但是按照ASCII排序的，中間是數(shù)字，這樣的方式顯然不是我們需要的

熟悉sort方法的同學(xué)知道sort支持傳入比較器，是的我們可以自定義比較器傳入，這樣想要什么的排序都可以實現(xiàn)，但是復(fù)雜比較器實現(xiàn)起來也有一定的工作量和難度的，因此我們要介紹的主角出現(xiàn)了，它就是Intl.Collator

Intl.Collator比較器

console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#']
     .sort(new Intl.Collator('zh-CN').compare))

默認(rèn)比較器排序的結(jié)果和sort默認(rèn)的比較器排序一樣，但是我們可以給比較傳入一個排序的options參數(shù)，如是否應(yīng)使用數(shù)字對照，使得“1”<“2”<“10”。可能的值為 true 和 false；默認(rèn)值為 false

console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#']
    .sort(new Intl.Collator('zh-CN', { numeric: true }).compare))

此時排序的就是按照中文數(shù)字的方式排序了

補：options 可選

包含一些或所有的以下屬性的對象：

localeMatcher

使用的區(qū)域匹配算法。可能的值為："lookup" 和 "best fit"；默認(rèn)值為 "best fit"。參見 Intl 頁面以了解此選項的詳細(xì)信息。

usage

比較是用于排序還是用于搜索匹配的字符串。可能的值為 "sort" 和 "search"；默認(rèn)值為 "sort"。

sensitivity

字符串中的哪些差異應(yīng)導(dǎo)致結(jié)果值為非零。可能的值為：

"base"：只有字母不同的字符串比較不相等。例如：a ≠ b、a=á、a=A。
"accent"：只有不同的基本字母或重音符號和其他變音符號的字符串比較為不相等。例如：a ≠ b、a ≠ á、a=A。
"case"：只有不同的基本字母或大小寫的字符串比較不相等。例如：a ≠ b、a=á、a ≠ A。
"variant"：字符串的字母、重音和其他變音符號，或不同大小寫比較不相等。也可以考慮其他差異。例如：a ≠ b、a ≠ á、a ≠ A。

"sort" 用法（usage）的默認(rèn)值為 "variant"。"search" 用法則取決于區(qū)域。

ignorePunctuation

是否應(yīng)忽略標(biāo)點。可能的值為 true 和 false；默認(rèn)值為 false。

numeric

是否應(yīng)使用數(shù)字對照，使得“1”<“2”<“10”。可能的值為 true 和 false；默認(rèn)值為 false。此選項也可以通過 Unicode 擴展鍵 kn 設(shè)置；當(dāng)兩者同時設(shè)置時，options 屬性的優(yōu)先級更高。

caseFirst

是否應(yīng)該首先根據(jù)大小寫排序。可能的值為 "upper"、"lower" 和 "false"（使用區(qū)域的默認(rèn)設(shè)置）。此選項也可以通過 Unicode 擴展鍵 kf 設(shè)置；當(dāng)兩者同時設(shè)置時，options 屬性的優(yōu)先級更高。

collation

一些區(qū)域的變體。可能的值包括：