JavaScript Array.toLocaleString() メソッド
例
各地域の形式にフォーマット:
const prices = [1234.56, 7890.12, 3456.78];
const dateArray = [new Date(), new Date('2023-01-01')];
//数値配列のローカライズ形式
console.log(prices.toLocaleString('en-US'));
//出力例: "1,234.56,7,890.12,3,456.78" (英語形式)
console.log(prices.toLocaleString('de-DE'));
//出力例: "1.234,56,7.890,12,3.456,78" (ドイツ語形式)
//日付配列のローカライズ形式
console.log(dateArray.toLocaleString('en-US'));
//出力例: "5/6/2023, 1/1/2023" (英語の日付形式)
console.log(dateArray.toLocaleString('ja-JP'));
//出力例: "2023/5/6, 2023/1/1" (日本語の日付形式)
試してみる »
定義と使い方
Array.toLocaleString()JavaScript の配列オブジェクトの組み込みメソッドで、配列要素を表す文字列を返します。
Array.toLocaleString()このメソッドの特徴は、現在の環境の言語設定(locale)に基づいて配列の各要素をフォーマットすることです。
簡単に言うと、このメソッドは次のことを行います:
- 配列を文字列に変換します
- 日付や数字などのローカライズ形式を自動的に処理します
- 要素間はカンマで区切ります
基本構文
array.toLocaleString([locales[, options]])
パラメータの説明
locales(オプション):言語コードを表す文字列または文字列の配列(例:"en-US"、"zh-CN")options(オプション):フォーマットオプションを指定するための設定オブジェクト
使い方
基本の使い方
例
const numbers = [12345.67, 1000, 3.14159];
console.log(numbers.toLocaleString('en-US'));
// 出力: "12,345.67,1,000,3.142"
console.log(numbers.toLocaleString('de-DE'));
// 出力: "12.345,67,1.000,3,142"
console.log(numbers.toLocaleString('en-US'));
// 出力: "12,345.67,1,000,3.142"
console.log(numbers.toLocaleString('de-DE'));
// 出力: "12.345,67,1.000,3,142"
日付オブジェクトの処理
例
const dates = [new Date(), new Date('2023-01-01')];
console.log(dates.toLocaleString('en-US'));
// 出力例: "1/2/2024, 2:30:45 PM,1/1/2023, 12:00:00 AM"
console.log(dates.toLocaleString('en-US'));
// 出力例: "1/2/2024, 2:30:45 PM,1/1/2023, 12:00:00 AM"
高度な使い方
options パラメータを使用する
例
const numbers = [12345.67, 1000, 3.14159];
// 通貨形式を指定
console.log(numbers.toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
}));
// 出力: "$12,345.67,$1,000.00,$3.14"
// パーセント形式を指定
console.log([0.25, 0.5, 0.75].toLocaleString('en-US', {
style: 'percent'
}));
// 出力: "25%,50%,75%"
// 通貨形式を指定
console.log(numbers.toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
}));
// 出力: "$12,345.67,$1,000.00,$3.14"
// パーセント形式を指定
console.log([0.25, 0.5, 0.75].toLocaleString('en-US', {
style: 'percent'
}));
// 出力: "25%,50%,75%"
toString() との違い
| メソッド | ローカライズ処理 | 日付フォーマット | 数字フォーマット |
|---|---|---|---|
| toString() | 无 | デフォルトの文字列に変換 | 特別な処理なし |
| toLocaleString() | 有 | ロケール形式に従う | ロケール形式に従う |
例
const arr = [1000, new Date()];
console.log(arr.toString());
// 出力: "1000,Wed Jan 03 2024 14:30:00 GMT+0800 (China Standard Time)"
console.log(arr.toLocaleString('zh-CN'));
// 出力: "1,000,2024/1/3 14:30:00"
console.log(arr.toString());
// 出力: "1000,Wed Jan 03 2024 14:30:00 GMT+0800 (China Standard Time)"
console.log(arr.toLocaleString('zh-CN'));
// 出力: "1,000,2024/1/3 14:30:00"
実際の利用シーン
- 多言語サイト:ユーザーの言語設定に応じてフォーマットされたデータを表示する
- 財務アプリ:地域ごとの通貨形式を正しく表示する
- データ分析:ユーザーが慣れ親しんだ形式で数字や日付を表示する
- フォーム表示:入力欄にローカライズされたデータを表示する
注意事項
- パフォーマンスの考慮:頻繁に呼び出すと、特に大規模な配列ではパフォーマンスに影響を与える可能性がある
- ブラウザの互換性:最新のブラウザはすべて対応しているが、一部のオプションに差異がある場合がある
- デフォルトの動作:locales パラメータを指定しない場合、実行環境のデフォルト言語設定が使用される
- 要素の処理:日付や数値以外のオブジェクトの場合は、その toString() メソッドが呼び出される
まとめ
Array.toLocaleString()これは強力なローカライズツールであり、ユーザーの地域に応じてフォーマットされたデータを表示する必要があるシーンに特に適しています。国際化(i18n)の実装を簡素化し、開発者が地域ごとの数字や日付などの形式の違いを簡単に処理できるようにします。
覚えておいてください。アプリが世界中のユーザーを対象とする場合、このメソッドを使用することでユーザーエクスペリエンスを大幅に向上させることができます!
その他の拡張
JavaScript Array オブジェクト