JavaScriptではPythonやC＃などでおなじみの文字列オブジェクトに対するformatメソッドが使えない。
文字列の中に変数を埋め込めるformatメソッドってJavaScriptには無いのかなあ、と思って調べていたらStringクラスにprototype宣言することで似たようなことが実現できることが分かった。
こちらのサイトで色々と紹介されている。
https://www.it-swarm-ja.tech/ja/javascript/printfstringformat%E3%81%A8%E5%90%8C%E7%AD%89%E3%81%AEjavascript/957771974/
www.it-swarm-ja.tech
String.prototype.formatによる疑似formatメソッド宣言
宣言方法
/*
* pythonやC#のformatメソッド的な機能を実現
*/
String.prototype.format = function(){
let formatted = this;
for(let arg in arguments){
formatted = formatted.replace("{" + arg + "}", arguments[arg]);
}
return formatted;
};
使い方としてはこんな感じ。
// 表示する変数
let no = 120;
let kaworu = "生と死は等価値なんだ、僕にとってはね。";
// 使用例
console.log("No. {0} カヲル「{1}」".format(no, kaworu));
console.log("{1}:{0}".format(no, kaworu));
表示結果
No. 120 カヲル「生と死は等価値なんだ、僕にとってはね。」 生と死は等価値なんだ、僕にとってはね。:120
ただし以下のように同じ変数を複数回表示したい場合はうまくいかない。
// 使用例（うまくいかない場合）
let a = 10, b = 20;
console.log("{1} - {0} = {0}".format(a, b));
表示結果
20 - 10 = {0}
疑似formatメソッド利用例
もちろんこのformatメソッドを使わなくてもできる事だが、プログラムの見た目がすっきりするので色々と便利に利用できる。
例えばこんな利用例もある。
eva.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>疑似formatメソッド利用例</title>
<style>
input{
font-size: 2em;
padding: 1em;
}
</style>
</head>
<body>
<h1>疑似formatメソッド利用例</h1>
<div id="contents"></div>
<script>
/*
* pythonやC#のformatメソッド的な機能を実現
*/
String.prototype.format = function(){
let formatted = this;
for(let arg in arguments){
formatted = formatted.replace("{" + arg + "}", arguments[arg]);
}
return formatted;
};
let eva = [
{name: "レイ", body: "零号機"},
{name: "シンジ", body: "初号機"},
{name: "アスカ", body: "弐号機"},
];
let contents = document.getElementById("contents");
for(let i in eva){
let elm = document.createElement("input");
elm.type = "button";
elm.value = eva[i].name;
elm.onclick = function(){
alert("{0} 「エヴァ{1}発進します！」".format(eva[i].name, eva[i].body));
};
contents.appendChild(elm);
}
</script>
</body>
</html>
JavaScriptはプロトタイプベースのオブジェクト指向言語だそうです。
わたしはJavaScriptのprototype宣言がよく分かっていなかったのですが、このサンプルでなんとなく分かってきました。
コメント