JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでアクセント付き文字を含む文字列を並べ替える方法

JavaScriptの標準的な sort() メソッドは、文字列をUnicodeコードポイントの順序に基づいて比較します。そのため、「é」や「ó」のようなアクセント付き文字を含む文字列を単純にソートすると、期待通りのアルファベット順にならないことがあります。

この問題を解決するには、localeCompare() メソッドを使用します。このメソッドは、指定されたロケールの言語規則に従って文字列を比較できるため、アクセント付き文字も正しく並べ替えられます。

localeCompare() の基本的な使い方

以下は、スペイン語のアクセント付き文字を含む配列を localeCompare() を使ってソートするサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color:blueviolet
    }
    .sample{
        color:red;
    }
</style>
</head>
<body>
<h1>アクセント付き文字を含む文字列のソート</h1>
<div class="sample">[qué,cómo,dónde,quién,cuánto,cuántos]</div><br>
<div class="result"></div>
<br>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると配列がソートされます</h3>
<script>
    let resEle = document.querySelector('.result');
    let BtnEle = document.querySelector('.Btn');
    let arr = ['qué','cómo','dónde','quién','cuánto','cuántos'];
        BtnEle.addEventListener('click',function(){
            resEle.innerHTML= arr.sort(function (a, b) {
              return a.localeCompare(b);
            });
        });
</script>
</body>
</html>

実行結果

ページを読み込んだ直後は、元の配列が表示されます。

JavaScriptでアクセント付き文字を含む文字列を並べ替える方法

「CLICK HERE」ボタンをクリックすると −

JavaScriptでアクセント付き文字を含む文字列を並べ替える方法

解説

このコードのポイントは次のとおりです。

  • localeCompare(a, b)：引数に渡した文字列同士を、ロケールの照合ルールに基づいて比較し、a が b より前に来る場合は負の値、後ろに来る場合は正の値、等しい場合は 0 を返します。
  • sort() のコールバック：arr.sort((a, b) => a.localeCompare(b)) のように、比較関数として localeCompare を渡すことで、アクセント記号を考慮した自然な順序でソートできます。
  • ロケールの指定：第2引数にロケール（例：'es'）を渡すことで、特定の言語の規則に合わせた比較も可能です。例：a.localeCompare(b, 'es')

なお、ES2023以降では Array.prototype.toSorted() を使うと元の配列を変更せずに新しいソート済み配列を作成できるため、イミュータブルな処理を行いたい場合にも便利です。アクセント付き文字列のソートには、Intl.Collator オブジェクトを使う方法もあります。大量のデータを扱う場合は、Collator の方がパフォーマンス面で優れています。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. 【保存版】Windowsでアクセント付き文字(é・ñなど)を入力する4つの方法

    世界には英語のアルファベットだけではない文字体系が数多く存在します。スペイン語やフランス語をはじめ、多くの言語は英語と同じラテン文字を共有しているものの、アクセント記号が付いた独自の文字を使用しています。アクセント記号には主に5種類あり、それぞれグレイブ(アクサングラーブ)、アキュート(アクサンテギュ)、サーカムフレックス、チルダ、そしてウムラウトと呼ばれます。これらは各言語ごとに使われ分けられています。Windowsユーザーであれば、海外の言葉や人名などを入力する際にアクセント付き文字が必要になる場面は少なくありません。最も理想的なのは専用キーからの直接入力ですが、日本語や英語のキーボードに