web-dev-qa-db-ja.com

プレースホルダーと置換オブジェクトを使用してJavaScript文字列をフォーマットしますか？

私は言う文字列を持っています：My Name is %NAME% and my age is %AGE%.

%XXX%はプレースホルダーです。オブジェクトの値をそこに代入する必要があります。

オブジェクトは次のようになります：{"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

オブジェクトを解析し、文字列を対応する値に置き換える必要があります。最終出力は次のようになります。

私の名前はマイクで、私の年齢は26です。

全体は、純粋なjavascriptまたはjqueryを使用して実行する必要があります。

javascriptjquerystringstring-formatting
67
Joby Joseph

元の質問の要件は、文字列補間の恩恵を受けられないことは明らかです。これは、任意の置換キーの実行時処理のように見えるためです。

ただし、、文字列補間を行う必要がある場合は、次を使用できます：

_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 。

ただし、形式に特別な形式、つまり文字列がなく、置換オブジェクトにnullプロトタイプがない場合は、Object.prototype.hasOwnProperty()を使用します。ただし、置き換えられる可能性のある部分文字列は、プロトタイプのプロパティ名と衝突します。

jsFiddle 。

それ以外の場合、置換文字列が_'hasOwnProperty'_であれば、結果として文字列が乱れます。

jsFiddle 。

補足として、replacementsではなく、ObjectとArrayを呼び出す必要があります。

106
alex

ES6テンプレートリテラルを使用してはどうですか？

var a = "cat";
var b = "fat";
console.log(`my ${a} is ${b}`); //notice back-ticked string

テンプレートリテラルの詳細...

23
Tomasz Mularczyk

JQuery（jquery.validate.js）を使用して、簡単に機能させることができます。

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

または、その機能だけを使用する場合は、その機能を定義して、次のように使用できます。

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

jquery.validate.jsチームの功績

11
zawhtut

最新のブラウザと同様に、プレースホルダは、Cスタイル関数printf()と同様に、新しいバージョンChrome/Firefoxでサポートされています。

プレースホルダー：

  • %s文字列。
  • %d、%i整数。
  • %f浮動小数点数。
  • %oオブジェクトハイパーリンク。

例

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

ところで、出力を見るには：

  • Chromeで、ショートカットCtrl + Shift + JまたはF12を使用して開発者ツールを開きます。
  • Firefoxでは、ショートカットCtrl + Shift + Kを使用して開発者ツールを開きます。 （今後使用されないFirebugを開くF12を使用しないでください。コンソールタブにはメッセージが表示されません）。

@ Update-nodejsサポート

Nodejsは%fをサポートしていないようですが、代わりにnodejsで%dを使用できます。 %dを使用すると、整数ではなく浮動小数点数として出力されます。

7
Eric Wang

replace() を使用するだけです

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);
4
hafichuk

次のようなカスタム置換関数を使用できます。

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

ここで動作することを確認できます： http://jsfiddle.net/jfriend00/DyCwk/ 。

3
jfriend00

実行時にes6テンプレートリテラルを動的に使用して、これを行う別の方法を次に示します。

const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}


const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return `' + str + '`').call({obj})

document.body.innerHTML = result
2
Simon Schärer

％sプレースホルダーを次のように置き換えるなど、console.logに近い何かをしたい場合

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

これを書いた

function log() {
  var args = Array.prototype.slice.call(arguments);
  var rep= args.slice(1, args.length);
  var i=0;
  var output = args[0].replace(/%s/g, function(match,idx) {
    var subst=rep.slice(i, ++i);
    return( subst );
  });
   return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;
<span id="console"/>

あなたは得るでしょう

>log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>"Hello Loreto how are you today is everything allright?"

[〜＃〜] update [〜＃〜]

文字列変換を扱うときに便利なString.prototypeとして簡単なバリアントを追加しました。ここにあります：

String.prototype.log = function() {
    var args = Array.prototype.slice.call(arguments);
    var rep= args.slice(0, args.length);
    var i=0;
    var output = this.replace(/%s|%d|%f|%@/g, function(match,idx) {
      var subst=rep.slice(i, ++i);
      return( subst );
    });
    return output;
   }

その場合はあなたがします

"Hello %s how are you %s is everything %s?".log("Loreto", "today", "allright")
"Hello Loreto how are you today is everything allright?"

このバージョンをお試しください こちら

2
loretoparisi

これにより、まさにそれを行うことができます

NPM： https://www.npmjs.com/package/stringinject

GitHub： https://github.com/tjcafferkey/stringinject

以下を行うことにより：

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Git
1
tjcafferkey

簡単な例として：

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

出力は次のとおりです。

ジャックは40歳です

1
Yomi