JavaScriptの「.localeCompare()」について簡単なサンプルコードで解説
6 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptの.localeCompare()が何かと簡単なサンプルコードを通しての解説の記事になります。
目次
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
.localeCompare()とは
国の言語のルールに基づいて文字の並び順を比較して値を返すメソッドです。
基本形は以下になります。
str1.localeCompare(str2)「str1」と「str2」の文字の並び順を比較して以下の値を返します。
str1の並び順 < str2の並び順 → -1
str1の並び順 === str2の並び順 → 0
str1の並び順 > str2の並び順 → 1具体的なコードで考えると以下になります。
console.log('apple'.localeCompare('banana')); // apple < banana → -1
console.log('cherry'.localeCompare('cherry')); // cherry == cherry → 0
console.log('orange'.localeCompare('grape')); // orange > grape → 1国を指定する場合
国を指定しない場合はブラウザ(Chromeやsafariなどのこと)で設定している国に指定されます。
国を指定する場合は下記の記述をします。
console.log('apple'.localeCompare('banana', 'ja'));
console.log('cherry'.localeCompare('cherry', 'en'));
console.log('orange'.localeCompare('grape', 'de'));第二引数に国を指定すればいいです。
実用的な使い方
下記のコードで考えます。
const fruits = ['Banana', 'apple', 'cherry'];
const sortedFruits = fruits.sort((a, b) => a.localeCompare(b));
console.log(sortedFruits);
// 結果 ["apple", "Banana", "cherry"]「.sort()」でも並び替えができるのに「.localeCompare」をわざわざ使うのは理由があります。
配列の要素が英語の場合
例えば配列の要素が英語の場合はアルファベット順に並ばずに大文字→小文字の順に並びます。
const fruits = ['Banana', 'apple', 'cherry'];
const sortedFruits = fruits.sort((a, b) => a.localeCompare(b));
console.log(sortedFruits);
// 結果 ["Banana", "cherry", "apple"]「.localeCompare」を使うとアルファベット順に並べることができます。
const fruits = ['Banana', 'apple', 'cherry'];
const sortedFruits = fruits.sort((a, b) => a.localeCompare(b));
console.log(sortedFruits);
// 結果 ["apple", "Banana", "cherry"]配列の要素が日本語の場合
日本語の場合は「.sort()」で対応できない場合があります。
例えば下記です。
const words = ['あかり', 'いぬ', 'うさぎ', 'かさ', 'アイウ'];
console.log(words.sort());
// 結果: [ 'あかり', 'いぬ', 'うさぎ', 'かさ', 'アイウ' ]「アイウ」は「いぬ」の後ろに来るはずですが.sort()は考慮しません。
.localeCompareを使えば考慮します。
国の指定
.sort()では国に合わせた並び順を指定することができませんが.localeCompareではそれができます。
だから配列の要素を並び替える時は.sort()と.localeCompareを組み合わせた使い方をお勧めします。