JavaScriptのlocaleCompare()とは？文字列を自然な順番で比較・並び替えする方法

JavaScriptのlocaleCompare()は、文字列同士を比較し、並び替え順を判定するためのメソッドです。

通常の比較演算子でも文字列の比較はできますが、日本語や英語、大文字・小文字、数字を含む文字列などを扱う場合は、意図した順番にならないことがあります。

そのようなときに便利なのがlocaleCompare()です。
localeCompare()を使うと、言語や比較ルールを指定しながら、文字列を自然な順番で比較できます。

JavaScriptの文字列操作を基礎から確認したい場合は、先にJavaScriptの文字列とは？基本と使い方を解説もあわせて読むと理解しやすくなります。

localeCompare()とは

localeCompare()は、ある文字列と別の文字列を比較し、どちらが並び替え順で前に来るかを数値で返すメソッドです。

MDNでは、localeCompare()は「参照文字列がソート順で指定された文字列の前か後か、または同じかを示す数値を返す」と説明されています。

基本形は次のとおりです。

const result = "apple".localeCompare("banana");

console.log(result);

実行結果の例です。

-1

"apple"は"banana"より前に並ぶため、負の数が返ります。

localeCompare()の戻り値

localeCompare()の戻り値は、主に次の3パターンで考えます。

const a = "apple";
const b = "banana";

console.log(a.localeCompare(b));
console.log(b.localeCompare(a));
console.log(a.localeCompare("apple"));

実行結果の例です。

-1
1
0

戻り値の意味は次のとおりです。

ただし、返される数値が必ず-1や1になるとは限りません。
そのため、実務では「負の数か」「0か」「正の数か」で判断するのが基本です。

localeCompare()の基本的な使い方

英単語を比較する

const word1 = "cat";
const word2 = "dog";

const result = word1.localeCompare(word2);

console.log(result);

実行結果の例です。

-1

"cat"は"dog"より前に並ぶため、負の数が返ります。

同じ文字列を比較する

const word1 = "apple";
const word2 = "apple";

const result = word1.localeCompare(word2);

console.log(result);

実行結果です。

0

同じ文字列として扱われるため、0が返ります。

sort()とlocaleCompare()を組み合わせる

localeCompare()は、配列の並び替えでよく使われます。

sort()だけでも文字列の配列は並び替えできますが、日本語や数字を含む文字列では意図しない順番になることがあります。

sort()の基本を確認したい場合は、JavaScriptのsort()とは？配列を並び替える基本もあわせて読むと理解しやすくなります。

const fruits = ["banana", "apple", "orange"];

fruits.sort(function(a, b) {
  return a.localeCompare(b);
});

console.log(fruits);

実行結果です。

[ 'apple', 'banana', 'orange' ]

localeCompare()は比較結果を数値で返すため、sort()の比較関数として使いやすいメソッドです。

日本語をlocaleCompare()で並び替える

localeCompare()では、ロケールを指定できます。
日本語として比較したい場合は、"ja"を指定します。

const words = ["さくら", "あお", "かき", "いぬ"];

words.sort(function(a, b) {
  return a.localeCompare(b, "ja");
});

console.log(words);

実行結果の例です。

[ 'あお', 'いぬ', 'かき', 'さくら' ]

第2引数に"ja"を指定することで、日本語の並び替えとして扱いやすくなります。

localeCompare()の構文

localeCompare()の構文は次のとおりです。

文字列.localeCompare(比較する文字列, ロケール, オプション)

具体的には次のように書きます。

const result = "あお".localeCompare("いぬ", "ja");

console.log(result);

実行結果の例です。

-1

各引数の意味は次のとおりです。

大文字・小文字の違いを調整する

localeCompare()では、optionsを使って比較の細かいルールを指定できます。

たとえば、大文字・小文字をどこまで区別するかを調整できます。

const result = "apple".localeCompare("Apple", "en", {
  sensitivity: "base"
});

console.log(result);

実行結果の例です。

0

sensitivity: "base"を指定すると、大文字・小文字の違いを大きく区別せずに比較できます。

数字を自然な順番で並び替える

文字列に数字が含まれる場合、通常の並び替えでは不自然な順番になることがあります。

const files = ["file10", "file2", "file1"];

files.sort();

console.log(files);

実行結果です。

[ 'file1', 'file10', 'file2' ]

これは文字列として比較されるため、"file10"が"file2"より前に並んでいます。

自然な数字順にしたい場合は、numeric: trueを指定します。

const files = ["file10", "file2", "file1"];

files.sort(function(a, b) {
  return a.localeCompare(b, "en", {
    numeric: true
  });
});

console.log(files);

実行結果です。

[ 'file1', 'file2', 'file10' ]

numeric: trueを指定すると、文字列内の数字を数値として扱いやすくなります。

オブジェクトの配列をlocaleCompare()で並び替える

localeCompare()は、オブジェクトの配列を特定のプロパティで並び替えるときにも使えます。

const users = [
  { name: "佐藤", kana: "さとう" },
  { name: "田中", kana: "たなか" },
  { name: "鈴木", kana: "すずき" }
];

users.sort((a, b) => a.kana.localeCompare(b.kana, "ja"));

console.log(users);

実行結果の例です。

[
  { name: '佐藤', kana: 'さとう' },
  { name: '鈴木', kana: 'すずき' },
  { name: '田中', kana: 'たなか' }
]

a.kanaとb.kanaを比較することで、kanaプロパティを基準に並び替えできます。

オブジェクトの基本を確認したい場合は、JavaScriptのオブジェクトとは？基礎からわかりやすく解説も参考になります。

localeCompare()と比較演算子の違い

文字列の比較は、<や>でもできます。

console.log("apple" < "banana");
console.log("dog" > "cat");

実行結果です。

true
true

ただし、比較演算子は言語ごとの自然な並び替えを細かく指定する用途には向いていません。

一方で、localeCompare()はロケールやオプションを指定できるため、表示名、商品名、ファイル名などを並び替える場面で便利です。

localeCompare()を使うときの注意点

戻り値の数値そのものに依存しない

localeCompare()は負の数、0、正の数を返します。
ただし、返される具体的な数値は環境によって異なる場合があります。

そのため、次のように-1や1と完全一致で比較する書き方は避けたほうが安全です。

const result = "apple".localeCompare("banana");

if (result < 0) {
  console.log("appleはbananaより前です");
}

実行結果です。

appleはbananaより前です

result === -1ではなく、result < 0のように判定します。

大量の文字列比較ではIntl.Collatorも検討する

大量の文字列を比較する場合は、localeCompare()を毎回呼び出すより、Intl.Collatorを使う方法もあります。

MDNでも、大きな配列を並び替えるような大量比較では、Intl.Collatorオブジェクトを作成し、compare()メソッドを使う方法がよいと説明されています。

const names = [
  { name: "田中", kana: "たなか" },
  { name: "佐藤", kana: "さとう" },
  { name: "鈴木", kana: "すずき" }
];

const collator = new Intl.Collator("ja");

names.sort((a, b) => collator.compare(a.kana, b.kana));

console.log(names);

実行結果の例です。

[
  { name: '佐藤', kana: 'さとう' },
  { name: '鈴木', kana: 'すずき' },
  { name: '田中', kana: 'たなか' }
]

大量データを扱う場合は、Intl.Collatorを使うことで比較ルールを再利用しやすくなります。

localeCompare()が向いている場面

localeCompare()は、次のような場面に向いています。

特に、一覧表示や検索結果の並び替えなど、ユーザーに見せる文字列を扱う場面で役立ちます。

localeCompare()のよくある間違い

returnを書き忘れる

sort()の中でlocaleCompare()を使う場合、比較結果をreturnする必要があります。

const fruits = ["banana", "apple", "orange"];

fruits.sort(function(a, b) {
  a.localeCompare(b);
});

console.log(fruits);

このコードでは、比較結果を返していないため、正しく並び替えできません。

正しくは次のように書きます。

const fruits = ["banana", "apple", "orange"];

fruits.sort(function(a, b) {
  return a.localeCompare(b);
});

console.log(fruits);

実行結果です。

[ 'apple', 'banana', 'orange' ]

アロー関数を使う場合は、次のように短く書けます。

const fruits = ["banana", "apple", "orange"];

fruits.sort((a, b) => a.localeCompare(b));

console.log(fruits);

実行結果です。

[ 'apple', 'banana', 'orange' ]

アロー関数の基本を確認したい場合は、JavaScriptのアロー関数とは？基本から使い方まで徹底解説も参考になります。

sort()が元の配列を変更することを忘れる

sort()は、元の配列そのものを変更します。

const fruits = ["banana", "apple", "orange"];

const sortedFruits = fruits.sort((a, b) => a.localeCompare(b));

console.log(fruits);
console.log(sortedFruits);

実行結果です。

[ 'apple', 'banana', 'orange' ]
[ 'apple', 'banana', 'orange' ]

元の配列を残したい場合は、スプレッド構文などでコピーしてから並び替えます。

const fruits = ["banana", "apple", "orange"];

const sortedFruits = [...fruits].sort((a, b) => a.localeCompare(b));

console.log(fruits);
console.log(sortedFruits);

実行結果です。

[ 'banana', 'apple', 'orange' ]
[ 'apple', 'banana', 'orange' ]

スプレッド構文を確認したい場合は、JavaScriptのスプレッド構文とは？配列やオブジェクトを展開する基本もあわせて読むと理解しやすくなります。

localeCompare()の実用例

記事タイトルを五十音順に並び替える

const articles = [
  { title: "関数の基本" },
  { title: "配列の基本" },
  { title: "オブジェクトの基本" }
];

const sortedArticles = [...articles].sort((a, b) => {
  return a.title.localeCompare(b.title, "ja");
});

console.log(sortedArticles);

実行結果の例です。

[
  { title: 'オブジェクトの基本' },
  { title: '関数の基本' },
  { title: '配列の基本' }
]

ファイル名を自然な順番で並び替える

const files = ["image10.png", "image2.png", "image1.png"];

const sortedFiles = [...files].sort((a, b) => {
  return a.localeCompare(b, "ja", {
    numeric: true
  });
});

console.log(sortedFiles);

実行結果です。

[ 'image1.png', 'image2.png', 'image10.png' ]

数字を含むファイル名や商品番号を並び替える場合に便利です。

localeCompare()のまとめ

localeCompare()は、文字列同士を比較し、並び替え順を数値で返すメソッドです。

通常の比較演算子よりも、言語や数字、大文字・小文字などを考慮した比較に向いています。

特に重要なポイントは次のとおりです。

localeCompare()を理解すると、文字列の並び替えをより自然に制御できます。
一覧表示、検索結果、ファイル名、商品名、ユーザー名などを扱う場面で活用しやすいメソッドです。

関連記事

JavaScriptのsort()とは？配列の並び替えを基礎から徹底解説

JavaScriptの比較関数とは？sort()で正しく並び替える基本を解説

JavaScriptの文字列とは？基本と使い方を解説

JavaScriptの配列操作まとめ（map・filter・reduce）

JavaScriptのスプレッド構文とは？配列やオブジェクトを展開する基本