数値と通貨をフォーマットする
Intl.NumberFormat でロケールに応じた数値を表示します。
「数値と通貨をフォーマットする」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Intl名前空間
Intlは、JavaScriptに組み込まれている国際化APIです。ライブラリを使わなくても、ロケールの規則に従って数値、日付、通貨などをフォーマットできます。
console.log(typeof Intl); // "object"
console.log(typeof Intl.NumberFormat); // "function"Intl.NumberFormatの基本
ロケールを指定してフォーマッターを作成し、その後format()を呼び出します。ロケールには、"en-US"や"de-DE"のようなBCP 47タグを使います。
const nf = new Intl.NumberFormat("en-US");
console.log(nf.format(1234567.89)); // "1,234,567.89"ロケールによる違い
同じ数値でも、ロケールによって表示が異なります。ドイツ語では、3桁区切りにピリオド、小数点にカンマを使います。
const n = 1234567.89;
console.log(new Intl.NumberFormat("en-US").format(n)); // 1,234,567.89
console.log(new Intl.NumberFormat("de-DE").format(n)); // 1.234.567,89通貨のフォーマット
style: "currency"とcurrencyコードを渡します。記号とその位置はロケールに従います。
const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
console.log(usd.format(2999.5)); // "$2,999.50"ロケールによる通貨表示
通貨自体は同じでも、選択したロケールに合わせて表示形式が変わります。
const opts = { style: "currency", currency: "EUR" };
console.log(new Intl.NumberFormat("en-IE", opts).format(1000)); // €1,000.00
console.log(new Intl.NumberFormat("de-DE", opts).format(1000)); // 1.000,00 €パーセントスタイル
style: "percent"は値に100を掛け、ロケールのパーセント記号を付加します。
const pct = new Intl.NumberFormat("en-US", { style: "percent" });
console.log(pct.format(0.1875)); // "19%"
console.log(new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 2 }).format(0.1875)); // "18.75%"小数点以下の桁数を制御する
minimumFractionDigitsとmaximumFractionDigitsで、小数点以下の桁数を制御します。
const f = new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
console.log(f.format(3)); // "3.00"
console.log(f.format(3.14159)); // "3.14"単位
unitとともにstyle: "unit"を使うと、キロメートルやリットルなどの測定値をフォーマットできます。
const speed = new Intl.NumberFormat("en-US", { style: "unit", unit: "kilometer-per-hour" });
console.log(speed.format(120)); // "120 km/h"コンパクト表記
notation: "compact"は大きな数値を省略して表示します（1.2K、3.4Mなど）。ソーシャルメディアの件数表示に便利です。
const c = new Intl.NumberFormat("en-US", { notation: "compact" });
console.log(c.format(1500)); // "1.5K"
console.log(c.format(2300000)); // "2.3M"符号の表示
signDisplay: "always"を使うと、正の値にも符号が表示されます。差分や変化量の表示に便利です。
const s = new Intl.NumberFormat("en-US", { signDisplay: "always" });
console.log(s.format(5)); // "+5"
console.log(s.format(-5)); // "-5"フォーマッターを再利用する
フォーマッターの作成には、比較的コストがかかります。呼び出すたびに作成するのではなく、1つ作成して多くの値で再利用します。
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const prices = [9.99, 19.5, 100];
console.log(prices.map((p) => money.format(p)));クイックチェック
数値のフォーマットをテストします。
復習：数値と通貨
ロケールに応じた数値のフォーマット、通貨、パーセント、単位、コンパクト表記、符号の表示、小数点以下の桁数の制御、フォーマッターの再利用について学びました。次は、日付と時刻です。
よくある質問
「数値と通貨をフォーマットする」レッスンは無料ですか？
はい。「数値と通貨をフォーマットする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「数値と通貨をフォーマットする」で何を学びますか？
Intl.NumberFormat でロケールに応じた数値を表示します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「数値と通貨をフォーマットする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 数値と通貨をフォーマットする
- 日付と時刻をフォーマットする
- 相対時間と複数形
- ロケールに対応した並べ替え