Rozważ ten kod:

var age = 3;

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

Czy istnieją inne sposoby wstawiania wartości zmiennej do łańcucha oprócz konkatenacji łańcucha?

Od wersji ES6 możesz używać literałów szablonów :

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

PS Uwaga użycie backticks: ``.

tl; dr

W razie potrzeby użyj literałów ciągowych szablonu ECMAScript 2015.

Wyjaśnienie

Nie ma bezpośredniego sposobu, aby to zrobić, zgodnie ze specyfikacjami ECMAScript 5, ale ECMAScript 6 ma ciągi szablonów , które były również znane jako quasi-literały podczas opracowywania specyfikacji. Użyj ich w ten sposób:

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

Możesz użyć dowolnego prawidłowego wyrażenia JavaScript w {}. Na przykład:

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

Inną ważną rzeczą jest to, że nie musisz się już martwić ciągami wieloliniowymi. Możesz napisać je po prostu jako

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

Uwaga: Użyłem io.js v2.4.0 do oceny wszystkich ciągów szablonów pokazanych powyżej. Możesz także użyć najnowszego Chrome do przetestowania powyższych przykładów.

Uwaga: Specyfikacje ES6 są teraz sfinalizowane , ale nie zostały jeszcze zaimplementowane przez wszystkie główne przeglądarki.
Zgodnie ze stronami Mozilla Developer Network zostanie to zaimplementowane w celu zapewnienia podstawowej obsługi począwszy od następujących wersji: Firefox 34, Chrome 41, Internet Explorer 12. Jeśli jesteś użytkownikiem Opery, Safari lub Internet Explorera i jesteś ciekawy tego teraz , to łóżko testowe może być używane do zabawy, dopóki wszyscy nie otrzymają wsparcia.

Skorygowany JavaScript Douglasa Crockforda zawiera String.prototype.supplantfunkcję. Jest krótki, znajomy i łatwy w użyciu:

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' }));

Jeśli nie chcesz zmieniać prototypu String, zawsze możesz go dostosować, aby był samodzielny, lub umieścić go w innej przestrzeni nazw, czy cokolwiek innego.

Uwaga: unikaj jakiegokolwiek systemu szablonów, który nie pozwala ci uciec przed własnymi ogranicznikami. Na przykład nie byłoby sposobu na wyprowadzenie następujących przy użyciu supplant()metody wymienionej tutaj.

„Mam 3 lata dzięki mojej zmiennej {age}”.

Prosta interpolacja może działać w przypadku małych samodzielnych skryptów, ale często ma tę wadę projektową, która ogranicza każde poważne użycie. Szczerze wolę szablony DOM, takie jak:

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

I użyj manipulacji jQuery: $('#age').text(3)

Alternatywnie, jeśli jesteś po prostu zmęczony łączeniem łańcuchów, zawsze istnieje alternatywna składnia:

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

Wypróbuj bibliotekę sprintf (pełna implementacja sprintf JavaScript typu open source). Na przykład:

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

vsprintf pobiera tablicę argumentów i zwraca sformatowany ciąg.

Możesz użyć systemu szablonów Prototype, jeśli naprawdę masz ochotę użyć młota do złamania orzecha:

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

Używam tego wzorca w wielu językach, gdy jeszcze nie wiem, jak to zrobić poprawnie i chcę szybko znaleźć jakiś pomysł:

// 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')
    ;

Chociaż nie jest szczególnie wydajny, uważam go za czytelny. Zawsze działa i jest zawsze dostępny:

' 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")

ZAWSZE

* 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'

Możesz to zrobić z łatwością za pomocą ES6 template stringi przenieść na ES5 za pomocą dowolnego dostępnego transpilaru, takiego jak babel.

const age = 3;

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

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

Spróbuj kiwi , lekki moduł JavaScript do interpolacji łańcuchów.

Możesz to zrobić

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

lub

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

Jeśli chcesz interpolować console.logdane wyjściowe, to po prostu

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

Tutaj %snazywa się to „specyfikatorem formatu”. console.logma wbudowaną obsługę tego rodzaju interpolacji.

Oto rozwiązanie, które wymaga podania obiektu o wartościach. Jeśli nie podasz obiektu jako parametru, domyślnie użyje zmiennych globalnych. Ale lepiej trzymaj się tego parametru, jest znacznie czystszy.

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>

Rozwijając drugą odpowiedź Grega Kindela , możesz napisać funkcję eliminującą część płyty kotłowej:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Stosowanie:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

Mogę ci pokazać przykład:

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'));

Od wersji ES6, jeśli chcesz wykonać interpolację ciągów w kluczach obiektowych, otrzymasz, SyntaxError: expected property name, got '${'jeśli zrobisz coś takiego:

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

Zamiast tego należy wykonać następujące czynności:

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

Dostarcza więcej dla wersji ES6 posta @Chris Nielsen.

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."

Używanie składni szablonów kończy się niepowodzeniem w starszych przeglądarkach, co jest ważne, jeśli tworzysz HTML do użytku publicznego. Używanie konkatenacji jest żmudne i trudne do odczytania, szczególnie jeśli masz wiele lub długie wyrażenia, lub jeśli musisz używać nawiasów do obsługi kombinacji elementów liczbowych i łańcuchowych (oba używają operatora +).

PHP rozwija ciągi cytowane zawierające zmienne, a nawet niektóre wyrażenia, używając bardzo zwartej notacji: $a="the color is $color";

W JavaScript można napisać wydajną funkcję do obsługi tego: var a=S('the color is ',color); przy użyciu zmiennej liczby argumentów. Chociaż w tym przykładzie nie ma przewagi nad konkatenacją, gdy wyrażenia stają się dłuższe, ta składnia może być jaśniejsza. Lub można użyć znaku dolara do zasygnalizowania początku wyrażenia za pomocą funkcji JavaScript, jak w PHP.

Z drugiej strony napisanie wydajnej funkcji obejścia w celu zapewnienia podobnego do szablonu rozszerzenia ciągów dla starszych przeglądarek nie byłoby trudne. Ktoś prawdopodobnie już to zrobił.

Wreszcie, wyobrażam sobie, że sprintf (jak w C, C ++ i PHP) mógłby być napisany w JavaScript, chociaż byłby nieco mniej wydajny niż te inne rozwiązania.

Niestandardowa elastyczna interpolacja:

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}

input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}

<input value="Everything between {{}} is {{processed}}" />
<div></div>

Chociaż szablony są prawdopodobnie najlepsze w opisywanym przypadku, jeśli masz lub chcesz swoje dane i / lub argumenty w postaci iterowalnej / tablicowej, możesz użyć String.raw.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

Mając dane jako tablicę, można użyć operatora rozkładania:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

Nie mogłem znaleźć tego, czego szukałem, a potem znalazłem -

Jeśli używasz Node.js, jest wbudowany utilpakiet z funkcją formatowania, która działa w następujący sposób:

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

Przypadkowo jest to teraz wbudowane w console.logsmaki również w Node.js -

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError