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

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

需求場(chǎng)景

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

方法一：使用localeCompare

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

在這個(gè)例子中，我們創(chuàng)建了一個(gè)包含商品編號(hào)的數(shù)組items。然后，我們使用sort方法對(duì)數(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)建一個(gè)比較器實(shí)例，它同樣能夠?qū)ψ址M(jìn)行自然排序。下面是具體實(shí)現(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);

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

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

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

結(jié)束

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

i列表排序

<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(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(); 此方法不可行,因?yàn)閍Li是元素集合,不是數(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.先把元素從原有父級(jí)上刪掉

2.添加到原有的父級(jí)元素下, 起到了移動(dòng)子元素的作用。

值類型排序

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

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

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

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

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

Intl.Collator比較器

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

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

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

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

補(bǔ)：options 可選

包含一些或所有的以下屬性的對(duì)象：

localeMatcher

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

usage

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

sensitivity

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

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

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

ignorePunctuation

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

numeric

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

caseFirst

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

collation

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