JavaScriptで文字列の要素を含む配列の並びをソートするのに便利なlocalCompareメソッドの使い方

JavaScriptで配列を扱う際、要素をソートした時があります。そんな時はsort()メソッドが便利ですが、このメソッドは文字列を含む場合、先頭の文字が大文字の要素を優先してしまうという癖があります。

例えば、["Orange", "apple","Banana"]というデータが含まれた配列をソートすると["Banana","Orange", "apple"]の順になってしまいます。

本来なら、大文字と小文字の値の違いを無視して、a-zで並べたいはずです。

そんな時はlocalCompareメソッドを利用する事で解決できます。

構文

メソッド意味返り値
文字列1.localCompare(文字列2)文字列1と文字列2を比較して、a-zで返す数値
文字列2.localCompare(文字列1)文字列1と文字列2を比較して、z-aで返す数値
localCompare()メソッド

サンプルコード

Output
元となる配列 [“Orange”, “apple”,”Banana”];
要素をa-zにソートして出力
要素z-aにソートして出力
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元となる配列
					td ["Orange", "apple","Banana"];
			tr
				th 要素をa-zにソートして出力
				td#targetText1
			tr
				th 要素z-aにソートして出力
				td#targetText2
			
			
	
JavaScript
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );

/*参照元となる配列*/
const sampleArray1 = ["Orange", "apple","Banana"];
const sampleArray2 = ["Orange", "apple","Banana"];

//定敵的な書き方(暗記で良い)
const arraySort1 = sampleArray1.sort((a,b) => a.localeCompare(b));

//上の省略記法が府に落ちない方のために
const arraySort2 = sampleArray2.sort((a,b) => {
	if ( b.localeCompare(a) > 0 ) {
		return 1;
	} else if ( b.localeCompare(a) == 0 ) {
		return 0;
	} else if ( b.localeCompare(a) < 0 ) {
		return -1;
	}
});
targetText1.textContent = arraySort1;
targetText2.textContent = arraySort2;
インストラクター
コメント

コメントを残す