整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日常開發中，我們經常會遇到需要對帶字母的數字字符串進行排序的場景。比如，在電商網站中，我們需要對包含商品編號的字符串進行排序，這些編號可能既有數字部分又有字母部分。今天，我就來給大家分享一個簡單易懂的方法，用JavaScript實現這樣的排序。
想象一下，我們在開發一個庫存管理系統，需要對一系列商品編號進行排序。這些商品編號是由數字和字母組成的，例如 12A, 2A, B3, 12B, C1。如果我們按照默認的字符串排序方式，結果往往不是我們想要的。這時候，我們就需要一種能正確處理這種帶字母數字字符串的排序方法。
JavaScript中的localeCompare方法可以幫助我們實現這一需求。它不僅可以比較字符串，還能根據需要進行數字排序。下面是具體的實現代碼：
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);在這個例子中，我們創建了一個包含商品編號的數組items。然后，我們使用sort方法對數組進行排序，并在排序函數中調用localeCompare方法。設置numeric為true可以使數字部分按照數值大小排序，而sensitivity設置為base則忽略大小寫進行比較。
排序后的結果是：
[ '2A', '12A', '12B',
'21B', 'A21', 'B3',
'B19', 'C1', 'C3',
'D2']另一種方法是使用Intl.Collator構造函數創建一個比較器實例，它同樣能夠對字符串進行自然排序。下面是具體實現：
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創建了一個比較器實例，并使用它的compare方法來進行排序。
排序后的結果與之前相同：
[
'2A', '12A', '12B',
'21B', 'A21', 'B3',
'B19', 'C1', 'C3',
'D2'
]通過使用localeCompare和Intl.Collator方法，我們可以輕松地對帶字母的數字字符串進行自然排序。這不僅在電商網站的商品編號排序中非常實用，在處理任何包含數字和字母的字符串排序時都能派上用場。
i列表排序
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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是元素集合,不是數組,sort()只能用于數組排序
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]=aLi[i]; //aLi元素集合轉換為數組
}
arr.sort(function (li1, li2){ //自定義排序函數
var n1=parseInt(li1.innerHTML); //將字符串轉換為整數
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())console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#'].sort())雖然排序了，但是按照ASCII排序的，中間是數字，這樣的方式顯然不是我們需要的
熟悉sort方法的同學知道sort支持傳入比較器，是的我們可以自定義比較器傳入，這樣想要什么的排序都可以實現，但是復雜比較器實現起來也有一定的工作量和難度的，因此我們要介紹的主角出現了，它就是Intl.Collator
console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#']
.sort(new Intl.Collator('zh-CN').compare))默認比較器排序的結果和sort默認的比較器排序一樣，但是我們可以給比較傳入一個排序的options參數，如是否應使用數字對照，使得“1”<“2”<“10”。可能的值為 true 和 false；默認值為 false
console.log(['中國01#', '中國02#', '中國023#', '中國10#', '中國1#', '中國2#', '中國11#', '中國20#']
.sort(new Intl.Collator('zh-CN', { numeric: true }).compare))此時排序的就是按照中文數字的方式排序了
包含一些或所有的以下屬性的對象：
localeMatcher
使用的區域匹配算法。可能的值為："lookup" 和 "best fit"；默認值為 "best fit"。參見 Intl 頁面以了解此選項的詳細信息。
usage
比較是用于排序還是用于搜索匹配的字符串。可能的值為 "sort" 和 "search"；默認值為 "sort"。
sensitivity
字符串中的哪些差異應導致結果值為非零。可能的值為：
"sort" 用法（usage）的默認值為 "variant"。"search" 用法則取決于區域。
ignorePunctuation
是否應忽略標點。可能的值為 true 和 false；默認值為 false。
numeric
是否應使用數字對照，使得“1”<“2”<“10”。可能的值為 true 和 false；默認值為 false。此選項也可以通過 Unicode 擴展鍵 kn 設置；當兩者同時設置時，options 屬性的優先級更高。
caseFirst
是否應該首先根據大小寫排序。可能的值為 "upper"、"lower" 和 "false"（使用區域的默認設置）。此選項也可以通過 Unicode 擴展鍵 kf 設置；當兩者同時設置時，options 屬性的優先級更高。
collation
一些區域的變體。可能的值包括：
此選項也可以通過 Unicode 擴展鍵 co 設置；當兩者同時設置時，options 屬性的優先級更高。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
