localeCompareで配列の内容を五十音順ソート

localeCompare() 使えば半角と全角が混ざってても大丈夫だし、漢字とかも五十音順になる。
並び順は記号 → 数字 → 英字 → ひらがな＆カタカナ → 漢字。

ざっと使い方

アロー演算子

var arr = ['衣', '安', '亜', '印', '愛'];
arr = arr.sort((x, y) => x.localeCompare(y, 'ja'));

console.log(arr);
// -> ["亜", "愛", "安", "衣", "印"]

function版

var arr = ['衣', '安', '亜', '印', '愛'];
arr = arr.sort(function(x, y) {
	return x.localeCompare(y, 'ja');
});

console.log(arr);
// -> ["亜", "愛", "安", "衣", "印"]

細かい話

Array の sort() を使うと、配列の内容をソートできます。この結果は、デフォルトだと String 型にキャストした結果でUTF-16コード順にソートされるので、五十音順ではないです。

デフォルト順ソート

console.log([
	'0', '1', '00', '01', '10', '11',
	'１', '０', '００', '０１', '１０', '１１',
	'!', '！', '_', '＿', 'A', 'a', 'á', 'B', 'b', 'Ａ', 'ａ', 'Ｂ', 'ｂ',
	'あ', 'ぁ', 'い', 'ぃ', 'ア', 'ァ', 'イ', 'ィ', 'ｱ', 'ｧ', 'ｲ', 'ｨ',
	'亜', '阿', '愛', '安', '衣', '印', '🐤', '🍆', '🍅'
].sort());
/* -> [
	0: "!"
	1: "0"
	2: "00"
	3: "01"
	4: "1"
	5: "10"
	6: "11"
	7: "A"
	8: "B"
	9: "_"
	10: "a"
	11: "b"
	12: "á"
	13: "ぁ"
	14: "あ"
	15: "ぃ"
	16: "い"
	17: "ァ"
	18: "ア"
	19: "ィ"
	20: "イ"
	21: "亜"
	22: "印"
	23: "安"
	24: "愛"
	25: "衣"
	26: "阿"
	27: "🍅"
	28: "🍆"
	29: "🐤"
	30: "！"
	31: "０"
	32: "００"
	33: "０１"
	34: "１"
	35: "１０"
	36: "１１"
	37: "Ａ"
	38: "Ｂ"
	39: "＿"
	40: "ａ"
	41: "ｂ"
	42: "ｧ"
	43: "ｨ"
	44: "ｱ"
	45: "ｲ"
] */

// 備考：絵文字は文字コード順で🍅→🍆→🐤です。
console.log('🍅'.charCodeAt(0), '🍅'.charCodeAt(1)); // -> 55356 57157
console.log('🍆'.charCodeAt(0), '🍆'.charCodeAt(1)); // -> 55356 57158
console.log('🐤'.charCodeAt(0), '🐤'.charCodeAt(1)); // -> 55357 56356

やたら例が長くてすみません。

それで、ずっと五十音順に並べるのは無理だと勘違いしてたんですけど、String に localeCompare() というメソッドがあることを知りました。

これ使って sort() すると、普通に五十音順にソートできるんですね。

五十音順ソート

// 配列はさっきと同じ
console.log([
	'0', '1', '00', '01', '10', '11',
	'１', '０', '００', '０１', '１０', '１１',
	'!', '！', '_', '＿', 'A', 'a', 'á', 'B', 'b', 'Ａ', 'ａ', 'Ｂ', 'ｂ',
	'あ', 'ぁ', 'い', 'ぃ', 'ア', 'ァ', 'イ', 'ィ', 'ｱ', 'ｧ', 'ｲ', 'ｨ',
	'亜', '阿', '愛', '安', '衣', '印', '🐤', '🍆', '🍅'
].sort((x, y) => x.localeCompare(y, 'ja')));
/* -> [
	0: "_"
	1: "＿"
	2: "!"
	3: "！"
	4: "🍅"
	5: "🍆"
	6: "🐤"
	7: "0"
	8: "０"
	9: "00"
	10: "００"
	11: "01"
	12: "０１"
	13: "1"
	14: "１"
	15: "10"
	16: "１０"
	17: "11"
	18: "１１"
	19: "a"
	20: "ａ"
	21: "A"
	22: "Ａ"
	23: "á"
	24: "b"
	25: "ｂ"
	26: "B"
	27: "Ｂ"
	28: "ぁ"
	29: "ァ"
	30: "ｧ"
	31: "あ"
	32: "ア"
	33: "ｱ"
	34: "ぃ"
	35: "ィ"
	36: "ｨ"
	37: "い"
	38: "イ"
	39: "ｲ"
	40: "亜"
	41: "阿"
	42: "愛"
	43: "安"
	44: "衣"
	45: "印"
] */

それだけです。さよなら。