JavaScriptで変数の内容を整形して文字列で出力するコードを紹介します。
概要
JavaScriptでJavaのString.formatメソッドや、C#のString.Format メソッドのように変数の内容を文字列内に配置して整形して出力したいことがあります。
JavaScriptでは、string.Formatメソッドは用意されていないため、template literal を利用して同様の処理を実装できます。
プログラム例: Template Literal を利用する
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function OutputProc() {
var product_name = "ぺんぎんクッキー";
var price = 420;
var text = `品名:${product_name} / 価格:\\${price}`;
var elem = document.getElementById("output");
elem.innerText = text;
}
</script>
</head>
<body onload="OutputProc();">
<h2>Formatと同様の処理のテストページ</h2>
<div id="output"></div>
</body>
</html>
解説
通常の文字列は
" またはｍ、
' で囲み、
"(文字列)" または
'(文字列)' の形式で表現します。
Template Literalの文字列は
` で囲み、
`(リテラル文字列)` で表現します。
リテラル文字列中に
${(変数名)} を記述することで、変数の値を文字列に埋め込みます。
今回の例では
品名:${product_name} / 価格:\\${price} を記述しており product_name 変数の値と、price 変数の値がテンプレートリテラルの文字列中に埋め込まれます。
なお、画面に文字列を表示する OutputProc関数は
<body onload="OutputProc();"> の記述によりページの表示時に実行されます。
実行結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
${product_name} ${price} の部分に変数の値が埋め込まれて画面に表示されていることが確認できます。
補足と注意
Template Literal の文字列を定義した時点の変数の値が文字列に埋め込まれます。
そのため、下記コードの場合では、Template Literal の文字列の定義後に変数の値を設定しているため、Template Literal の文字列には変数の値が埋め込まれません。
function OutputProc() {
var text = `品名:${product_name} / 価格:\\${price}`;
var product_name = "ぺんぎんクッキー";
var price = 420;
var elem = document.getElementById("output");
elem.innerText = text;
}
上記のコードを実行した場合の結果は数となります。変数部分の表示が
undefined となります。
プログラム例: タグ付きの Template Literal を利用する
タグ付きのテンプレートリテラルを利用する例です。
コード
下記HTMLファイルを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function myFormat(strings, value1, value2) {
return strings[0] + value1 + strings[1] + value2;
}
function OutputProc() {
var product_name = "しろくまアイス";
var price = 168;
var text = myFormat`品名:${product_name} / 価格:\\${price}`;
var elem = document.getElementById("output");
elem.innerText = text;
}
</script>
</head>
<body onload="OutputProc();">
<h2>タグ付きテンプレートリテラルのテストページ</h2>
<div id="output"></div>
</body>
</html>
解説
次の書式で記述すると、テンプレートリテラルの情報を関数に渡せます。
情報を受け取る関数は次の形式となります。
第一引数には、テンプレートリテラルの要素が配列で渡されます。第二引数以降はタグの値が渡されます。
function (関数名)(strings, value1, value2, ... value[n]) {
}
今回のコードの例では、与えられるテンプレートリテラルの文字列が
品名:${product_name} / 価格:\\${price} のため、stringsの値は次の通りです。
タグで区切られた要素の文字列が与えられます。
| string[0] | 品名: |
| string[1] | / 価格:\\ |
第二引数以降には次の値が渡されます。
| value1 | しろくまアイス | product_name 変数の値 |
| value2 | 168 | price 変数の値 |
リテラル文字列を渡される関数は下記のコードです。
与えられたテンプレートリテラルの値から、文字列を整形して結果の文字列を返します。
function myFormat(strings, value1, value2) {
return strings[0] + value1 + strings[1] + value2;
}
実行結果
上記のHTMLを表示します。下図のページが表示されます。変数の値が文字列中に埋め込まれて表示されています。
関数を返す実装
先のコードは、テンプレートリテラルを関数で解析して文字列を返しましたが、文字列ではなく関数を返す処理も実装できます。
関数を返すことで、Formatに似た書式で変数を埋め込む処理を記述できます。また、テンプレートリテラルの文字列を設定した後に変数の内容を決定して埋め込む処理も記述できます。
次のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function myFormat(strings) {
return (function (value1, value2) {
return strings[0] + value1 + strings[1] + value2;
});
}
function OutputProc() {
var textfunc = myFormat`品名:${0} / 価格:\\${1}`;
var elem = document.getElementById("output");
var product_name = "しろくまアイス";
var price = 168;
elem.innerText = textfunc(product_name, price);
}
</script>
</head>
<body onload="OutputProc();">
<h2>タグ付きテンプレートリテラルのテストページ</h2>
<div id="output"></div>
</body>
</html>
解説
リテラル文字列を渡される関数は下記のコードです。引数を2つとる関数を返すコードを実装しています。
function myFormat(strings) {
return (function (value1, value2) {
return strings[0] + value1 + strings[1] + value2;
});
}
テンプレートリテラルを
myFormat 関数で処理します。2つ引数をとる関数を返します。
var textfunc = myFormat`品名:${0} / 価格:\\${1}`;
textfunc は関数となるため、引数を2つ与えて呼び出します。結果は文字列で返ります。~
elem.innerText = textfunc(product_name, price);
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
別の書式
変数に値を代入せずに直接記述するコードの記述です。
function myFormat(strings) {
return (function (value1, value2) {
return strings[0] + value1 + strings[1] + value2;
});
}
function OutputProc() {
var textfunc = myFormat`品名:${0} / 価格:\\${1}`;
var elem = document.getElementById("output");
elem.innerText = textfunc("らくだキャラメル", 98);
}
または
function myFormat(strings) {
return (function (value1, value2) {
return strings[0] + value1 + strings[1] + value2;
});
}
function OutputProc() {
var elem = document.getElementById("output");
elem.innerText = myFormat`品名:${0} / 価格:\\${1}`("らくだキャラメル", 98);
}
実行結果は下図となります。
プログラム例: 独自に実装する例
別の方法として独自に実装する方法もあります。
コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != "undefined" ? args[number] : match;
});
};
function OutputProc() {
var text = "品名:{0} / 価格:{1}";
text = text.format("ぺんぎんクッキー", "\\380");
var elem = document.getElementById("output");
elem.innerText = text;
}
</script>
</head>
<body onload="OutputProc();">
<h2>Formatと同様の処理のテストページ</h2>
<div id="output"></div>
</body>
</html>
解説
prototype を利用して、Stringオブジェクトに format メソッドを追加で実装します。
argumentsはformatメソッドに与えられた引数の配列になります。
{0} を
arguments[0]で置換し、
{1}を
arguments[1]で置換します。同様に処理を繰り返し、
{n} を
arguments[n] で置換します。
String.prototype.format = function () {
var args = arguments;
return this.replace(/{(\d+)}/g, function (match, number) {
return typeof args[number] != "undefined" ? args[number] : match;
});
};
formatメソッドを呼び出す側のコードは下記です。
var text = "品名:{0} / 価格:{1}";
text = text.format("ぺんぎんクッキー", "\\380");
以下の記述も可能です。
var text = "品名:{0} / 価格:{1}".format("ぺんぎんクッキー", "\\380");
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
{0} {1} 部分に変数の値が挿入されて文字列が表示できています。
このページのキーワード
- 変数の内容を整形して文字列で出力する (JSでのFormat関数)
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-04-30
作成日: 2022-05-02
