JavaScriptのarray.toLocaleString()関数の使い方｜配列をロケール形式の文字列に変換する方法
array.toLocaleString()関数とは
JavaScriptのarray.toLocaleString()関数は、配列の要素を文字列として返し、各要素をカンマなどロケール固有の区切り文字で連結します。引数としてロケール（言語タグ）を指定することもでき、指定した言語・地域の書式に従って文字列へ変換されます。
例えば、日付オブジェクトが含まれる配列に対してこの関数を使用すると、「en-GB」や「ja-JP」などのロケールに応じた形式で日付が表示されます。ロケールを省略した場合は、実行環境のデフォルトのロケールが使用されます。
主な特徴
- 配列のすべての要素を文字列化し、区切り文字で連結して返す
- 第1引数に「en-GB」「ja-JP」などのBCP 47言語タグを指定可能
- Dateオブジェクトはロケールに応じた日付形式に変換される
- 数値はロケールごとの桁区切り表記に対応する場合がある
サンプルコード
以下は、array.toLocaleString()関数を使用して配列をイギリス（UK）ロケールの文字列に変換する実装例です。
<!DOCTYPE html>
<html lang="en">
<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;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript array.toLocaleString()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to convert the array to UK locale string</h3>
<script>
let fillEle = document.querySelector(".sample");
let arr = [1, 3, new Date()];
fillEle.innerHTML = arr;
document.querySelector(".Btn").addEventListener("click", () => {
arr = arr.toLocaleString("en-GB");
fillEle.innerHTML = arr;
});
</script>
</body>
</html>実行結果
ページを開いた直後は、元の配列がそのまま表示されます。
「CLICK HERE」ボタンをクリックすると、配列が「en-GB」（イギリス）ロケールの文字列に変換され、日付もイギリス形式で表示されます。
まとめ
array.toLocaleString()関数を使うと、配列の内容をユーザーの地域設定に合わせた読みやすい文字列として出力できます。特に日付や数値を含む配列を多言語対応のWebアプリケーションで表示したい場合に便利なメソッドです。
-
JavaScriptの配列some()メソッドの使い方をわかりやすく解説
JavaScriptのArray.some()メソッドは、配列の要素の中に、指定されたテスト（条件）を満たすものが「1つでも存在するかどうか」を判定するためのメソッドです。ここでいうテストとは、配列の各要素に対して順番に実行されるコールバック関数のことを指します。コールバック関数が1つでもtrueを返した時点でsome()はtrueを返し、すべての要素が条件を満たさなかった場合はfalseを返します。なお、空の配列に対して呼び出した場合は常にfalseを返すという仕様になっている点にも注意しましょう。some()メソッドのサンプルコード以下は、配列のsome()メソッドを使った具体的な実装例で
-
【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例：関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l