[解決済み] プレースホルダーと置換オブジェクトを使用してJavaScriptの文字列をフォーマットする?
質問
以下のような文字列があります。
My Name is %NAME% and my age is %AGE%.
%XXX%
はプレースホルダーである。そこにオブジェクトから値を代入する必要がある。
オブジェクトは次のようなものです。
{"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}
このオブジェクトをパースして、文字列を対応する値に置き換える必要があります。だから、その最終的な出力は次のようになります。
私の名前はマイクで、年齢は26です。
全部、純粋なjavascriptかjqueryを使ってやらなければならない。
どのように解決するのですか?
元の質問の要件は、任意の置換キーの実行時処理であるように見えるので、明らかに文字列補間の恩恵を受けることができませんでした。
しかし
は、文字列補間をするだけであれば
const str = `My name is ${replacements.name} and my age is ${replacements.age}.`
文字列を区切るバックティックに注意してください。
特定のOPの要件に適した回答として、以下のようなものがあります。
String.prototype.replace()
に置き換えることができます。
以下のコードは、すべてのマッチを処理し、置換のないものには触れません(置換値がすべて文字列である限り、そうでない場合は以下を参照してください)。
var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
str = 'My Name is %NAME% and my age is %AGE%.';
str = str.replace(/%\w+%/g, function(all) {
return replacements[all] || all;
});
jsFiddle .
置換文字列が文字列でない場合は、まずオブジェクトに存在することを確認してください。例のような形式、つまりパーセント記号でくくられた形式がある場合は
in
演算子を使うことができます。
jsFiddle .
しかし、フォーマットが特別なものでなく、つまり任意の文字列であり、かつ、replacementsオブジェクトに
null
プロトタイプを持たない場合は
Object.prototype.hasOwnProperty()
ただし、置換された文字列がプロトタイプのプロパティ名と衝突しないことが保証されている場合は、この限りではありません。
jsFiddle .
そうでない場合、置換文字列が
'hasOwnProperty'
であった場合、結果的にめちゃくちゃな文字列を得ることになります。
jsFiddle .
余談ですが、あなたは以下のように呼ばれるはずです。
replacements
アン
Object
ではなく
Array
.
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] C#のStringとstringの違いは何ですか?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptの日付の書式設定方法
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?