[JavaScript] 日本語を含んだ文字配列を大量に比較する場合「localeCompare」と「Intl.Collator の compare」のどちらがパフォーマンス良いか検証した


フロントエンドで日本語を含んだ文字配列を比較する手段として、

  • localeCompare
  • Intl.Collatorcompare

の2つがあります。
どちらが、パフォーマンスが良いか検証した際のメモを残します。

localeCompareIntl.Collatorcompare

本記事記載(ES2020)時点において、
文字列を比較するlocaleCompareというメソッドが提供されています。

localeCompareで配列の内容を五十音順ソートの記事にもある通り、
漢字を含めた日本語をソートしたい場合、localeCompareを使用する手があります。

が、MDNのlocalCompareの説明を読み進めると、
以下の記載が見つかりました。

パフォーマンス
巨大な配列のソートなど大量の文字列を比較する場合は Intl.Collator オブジェクトを作成し、 compare プロパティで提供される関数を利用すると良いでしょう。

日本語を含めた文字配列を作成し、検証してみました。

CodeSandboxで検証

から、1000個の名前ダミーデータ(英字500個, 日本語500個)を用意し、
CodeSandboxで検証用のロジックを書いてみました。

  • Intl.Collator Sortを押下すると、Intl.Collatorcompareを使った比較および時間計測
  • localCompare Sortを押下すると、localCompareを使った比較および時間計測

が行われ、コンソールへ以下のように出力されます。

// 1回目
Object {used: "Intl.Collator", time: 1.8749999981373549, localSamples: Array[1000]}
Object {used: "localeCompare", time: 3.025000001769513, localSamples: Array[1000]}

// 2回目
Object {used: "Intl.Collator", time: 1.8199999976204708, localSamples: Array[1000]}
Object {used: "localeCompare", time: 3.224999996717088, localSamples: Array[1000]}

MDNのドキュメント通り、Intl.Collatorの方が高速にソートできるようです。

結論

日本語を含む文字配列を大量に比較する場合は、
localeCompareよりIntl.Collatorを使うとパフォーマンスが良いとわかりました。

が、仕様上、一二三のような漢字も一三二とソートされますので、
注意して使用してください。1

おわり

以上です。
おかしい、気になった点などありましたら、
フィードバックいただけると助かります。

参考記事


  1. 名前に紐づくふりがなのような項目がある場合は、ふりがなでソートした方が正確に並び替えられます。