HOWTO · JavaScript
JavaScript で Printf または String.Format の代替
このチュートリアルでは、JavaScript での printf()の実際の置き換えについて説明します
このページの内容
JavaScriptには、組み込みのprintf関数やString.Format関数はありません。通常のテキストに値や式を埋め込むにはテンプレートリテラル、数値を特定のロケールに合わせて表示するにはIntl.NumberFormat、printf形式のフォーマット指定子が必要な場合はsprintf-jsを使います。console.logは値をコンソールに表示するもので、整形済みの文字列を作成する機能ではありません。以下のテンプレートリテラルとIntl.NumberFormatの例は実行済みですが、インラインのsprintf-jsの例は、提示された実行ケースには含まれていません。
テンプレートリテラルを使う
既知の値からメッセージを組み立てる場合、テンプレートリテラルが最も手軽です。テキストをバッククォートで囲み、変数や式を${...}の中に入れます。次の例では、名前と計算結果を使ってあいさつ文を作ります。
const name = "Alice";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
Hello, my name is Alice and I am 30 years old.
テンプレートリテラルでは、複数行の文字列や${price * quantity}のような式も使えます。生成される文字列がソースコード上で分かりやすく、フォーマッターの依存関係も必要ありません。開発中に値を確認したり表示したりするにはconsole.log(greeting)を使い、別の関数に渡したり保存したりする場合はgreetingという文字列自体を使います。
Intl.NumberFormatオブジェクトを使う
通貨、パーセンテージなどの数値にはIntl.NumberFormatを使います。指定したロケールに合わせて、桁区切り、小数点の表記、通貨記号の位置を整えます。これは数値をフォーマットするもので、任意のテキストを整形するものではありません。
const amount = 123456.789;
const formattedAmount = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(amount);
console.log(formattedAmount);
$123,456.79
すべての読者が米ドルを使うと決めつけず、ユーザーの状況に応じてロケールと通貨を選んでください。たとえば、de-DEとEURを指定すると、ユーロ金額がドイツの慣習に沿って表示されます。句読点や記号の位置はロケールによって異なるため、通貨記号と数値を自分で連結して表示を組み立てるのは避けましょう。
sprintf-jsライブラリを使う
プレースホルダーを含むフォーマット文字列のほうが管理しやすい場合は、npm install sprintf-jsでsprintf-jsパッケージをインストールし、sprintf関数を読み込みます。%sプレースホルダーは文字列を受け取り、%.1fは小数点以下1桁で数値をフォーマットします。
たとえば、nameが"Bob"、scoreが95.5の場合、sprintf("Player %s scored %.1f points", name, score)を呼び出すと、Player Bob scored 95.5 pointsというメッセージが作られます。CommonJSプロジェクトではconst sprintf = require("sprintf-js").sprintfで関数を取得できます。ESモジュールではimport { sprintf } from "sprintf-js"と記述します。どちらの方法でも、使用前にプロジェクトへパッケージをインストールする必要があります。
フォーマット文字列自体が役立つ場合、たとえばprintf形式の規約に合わせる場合は、このライブラリを使います。値が少ない短いメッセージなら、通常はテンプレートリテラルのほうが読みやすくなります。String.prototypeにformatメソッドを追加するのは避けてください。組み込みプロトタイプの変更はほかのコードと衝突する可能性があります。ライブラリや独立したヘルパー関数を使えば、動作を明示できます。位置指定プレースホルダーを扱うフォーマッターを実装する場合は、対応する引数があれば置換し、引数がないプレースホルダーはそのまま残す設計にもできます。
まとめ
フォーマットする値に合った方法を選びましょう。テンプレートリテラルはテキストに変数や式を組み込む方法です。Intl.NumberFormatはロケールに応じた数値表示に使い、sprintf-jsはその構文が必要な場合にprintf形式のプレースホルダーを提供します。JavaScriptには、組み込みのprintfやString.Formatに直接相当する機能はありません。console.logは値の確認に便利ですが、文字列の作成とは別の機能です。
よくある質問
-
JavaScriptで
printfに相当するものは何ですか?
組み込みの同等機能はありません。一般的な値の埋め込みにはテンプレートリテラル、printf形式のフォーマット指定子が必要な場合はsprintf-jsを使います。 -
数値を通貨形式にするにはどうすればよいですか?
new Intl.NumberFormat(locale, { style: "currency", currency }).format(amount)を呼び出し、ユーザーに合ったロケールと通貨を指定します。 -
テンプレートリテラルを複数行にできますか?
できます。バッククォート内の改行は、生成される文字列に含まれます。 -
console.logはprintfのように文字列をフォーマットしますか?
いいえ。console.logは値をコンソールに書き出すもので、デバッグには便利ですが、汎用的な文字列フォーマッターではありません。 -
どの方法が最速ですか?
ここには性能を比較できる測定結果がありません。必要な出力に応じて方法を選び、フォーマット速度が重要な場合は自分のアプリケーションで測定してください。