JavaScriptで文字列補間を行うにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/1408289

質問

このコードを検討してください：

var age = 3;

console.log("I'm " + age + " years old!");

文字列の連結以外に、変数の値を文字列に挿入する他の方法はありますか？

役に立ちましたか？

解決

ES6以降、テンプレートリテラルを使用できます：

let age = 3
console.log(`I'm ${age} years old!`)

PS バックティックの使用に注意してください： `` 。

他のヒント

tl; dr

ECMAScript 2015のテンプレート文字列リテラルを使用します（該当する場合）。

説明

ECMAScript 5仕様に従って直接行う方法はありませんが、ECMAScript 6にはテンプレート文字列。これは製図中に quasi-literals としても知られていました。仕様の。次のように使用します：

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

{} 内で有効なJavaScript式を使用できます。例：

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

もう1つの重要なことは、複数行の文字列についてもう心配する必要がないということです。次のように簡単に書くことができます

> `foo
...     bar`
'foo\n    bar'

注： io.js v2.4.0を使用して、上記のすべてのテンプレート文字列を評価しました。また、最新のChromeを使用して、上記の例をテストすることもできます。

注： ES6仕様は現在確定しています、しかし、すべての主要なブラウザによってまだ実装されていません。
Mozilla Developer Networkページによると、これはFirefox 34、Chrome 41、Internet Explorer 12以降の基本的なサポートのために実装されています。Opera、Safari、またはInternet Explorerのユーザーで、今これに興味がある場合は、このテストベッドは、誰もがこれをサポートするまで試してみることができます。

ダグラス・クロックフォードの修正JavaScript には、 String.prototype.supplant が含まれています関数。短く、使いやすく、使いやすいです：

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

文字列のプロトタイプを変更したくない場合は、いつでもそれをスタンドアロンに適合させるか、他の名前空間に配置するか、その他何でもできます。

注意事項：独自の区切り文字をエスケープできないテンプレートシステムは避けてください。たとえば、ここで説明した supplant（）メソッドを使用して以下を出力する方法はありません。

  

＆quot; {age}変数のおかげで3歳です。＆quot;

単純な内挿は、小さな自己完結型のスクリプトで機能する場合がありますが、多くの場合、この深刻な使用を制限する設計上の欠陥が伴います。正直なところ、次のようなDOMテンプレートが好きです。

<div> I am <span id="age"></span> years old!</div>

そしてjQuery操作を使用： $（ '＃age'）。text（3）

また、単に文字列の連結に飽きただけの場合は、常に代替構文があります：

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

sprintf をお試しください。例：

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

スレッジハンマーを使用したい場合は、プロトタイプのテンプレートシステムを使用できます。ナットを割る：

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

このパターンを多くの言語で使用する方法は、まだ適切に行う方法がわからず、アイデアをすぐに把握したいときに使用します。

// JavaScript
var stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

特に効率的ではありませんが、読みやすいと思います。常に機能し、常に利用可能です：

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

常に 

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

ES6 template string を使用して簡単に実行でき、babelのような利用可能なトランスピラーを使用してES5にトランスパイルできます。

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

kiwi 、ライト、文字列補間用の重みJavaScriptモジュール。

できること

Kiwi.compose("I'm % years old!", [age]);

または

Kiwi.compose("I'm %{age} years old!", {"age" : age});

値をオブジェクトに提供する必要があるソリューションを次に示します。パラメータとしてオブジェクトを指定しない場合、デフォルトでグローバル変数が使用されます。ただし、パラメーターを使用することをお勧めします。はるかにクリーンです。

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();
<div id="resultA"></div><div id="resultB"></div>

`を使用します（バックティックとも呼ばれる重大なアクセント）一重引用符（ '）または二重引用符（＆quot; ）およびドル記号/ブラケット記号 $ {変数}

の代わりに

例：

console.log(
  `current date: ${new Date()}`
);

テンプレートリテラルの詳細については、こちらをご覧ください。

console.log の出力に内挿する場合は、

console.log("Eruption 1: %s", eruption1);
                         ^^

ここで、％s は「フォーマット指定子」と呼ばれるものです。 console.log には、この種の補間サポートが組み込まれています。

例を示します：

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));

ES6以降、オブジェクトキーで文字列の補間を行う場合、 SyntaxError：期待されるプロパティ名を取得します。 

let age = 3
let obj = { `${age}`: 3 }

代わりに以下を実行する必要があります。

let obj = { [`${age}`]: 3 }

古いブラウザではテンプレート構文の使用に失敗します。これは、公共の使用のためにHTMLを作成する場合に重要です。連結を使用するのは面倒で読みにくいです。特に、多数の式や長い式がある場合、または括弧を使用して数値と文字列の項目の混合を処理する必要がある場合（どちらも+演算子を使用します）。

PHPは、非常にコンパクトな表記法を使用して、変数および一部の式を含む引用符付き文字列を展開します。 $ a =＆quot; the color is $ color＆quot ;;

JavaScriptでは、これをサポートするための効率的な関数を記述することができます： var a = S（ 'the color is'、color）; 、可変数の引数を使用します。この例では連結よりも利点はありませんが、式が長くなると、この構文はより明確になる可能性があります。または、PHPのように、JavaScript関数を使用して、ドル記号を使用して式の開始を通知できます。

一方、古いブラウザにテンプレートのような文字列の拡張を提供する効率的な回避機能を書くことは難しくありません。おそらく誰かがすでにそれを行っているでしょう。

最後に、sprintf（C、C ++、PHPなど）はJavaScriptで記述できると思いますが、これらの他のソリューションよりも少し効率が悪いでしょう。

  

@Chris Nielsenの投稿の ES6 バージョンをさらに置換します。

String.prototype.supplant = function (o) {
  return this.replace(/\${([^\${}]*)}/g,
    (a, b) => {
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    }
  );
};

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."
所属していません StackOverflow
scroll top