Considera questo codice:

var age = 3;

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

Esistono altri modi per inserire il valore di una variabile in una stringa, oltre alla concatenazione di stringhe?

Da ES6, è possibile utilizzare valori letterali modello :

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

PS Si noti l'uso di backticks: ``.

tl; dr

Utilizzare i letterali di stringhe modello ECMAScript 2015, se applicabili.

Spiegazione

Non esiste un modo diretto per farlo, come da specifiche ECMAScript 5, ma ECMAScript 6 ha stringhe modello , che erano anche conosciute come quasi letterali durante la stesura delle specifiche. Usali in questo modo:

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

È possibile utilizzare qualsiasi espressione JavaScript valida all'interno di {}. Per esempio:

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

L'altra cosa importante è che non devi più preoccuparti delle stringhe multilinea. Puoi scriverli semplicemente come

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

Nota: ho usato io.js v2.4.0 per valutare tutte le stringhe di modello mostrate sopra. Puoi anche utilizzare l'ultimo Chrome per testare gli esempi sopra riportati.

Nota: le specifiche ES6 sono ora finalizzate , ma devono ancora essere implementate da tutti i principali browser.
Secondo le pagine di Mozilla Developer Network , questo sarà implementato per il supporto di base a partire dalle seguenti versioni: Firefox 34, Chrome 41, Internet Explorer 12. Se sei un utente di Opera, Safari o Internet Explorer e sei curioso di questo ora , questo banco di prova può essere utilizzato per giocare fino a quando tutti non ricevono supporto per questo.

Il JavaScript correttivo di Douglas Crockford include una String.prototype.supplantfunzione. È breve, familiare e facile da usare:

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

Se non vuoi cambiare il prototipo di String, puoi sempre adattarlo per essere autonomo, o posizionarlo in qualche altro spazio dei nomi, o altro.

Avvertenza: evitare qualsiasi sistema di template che non ti permetta di sfuggire ai suoi delimitatori. Ad esempio, non ci sarebbe modo di produrre quanto segue usando il supplant()metodo menzionato qui.

"Ho 3 anni grazie alla mia variabile {age}."

L'interpolazione semplice può funzionare per piccoli script autonomi, ma spesso viene fornita con questo difetto di progettazione che limiterà qualsiasi uso serio. Preferisco onestamente i modelli DOM, come:

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

E usa la manipolazione di jQuery: $('#age').text(3)

In alternativa, se sei semplicemente stanco della concatenazione di stringhe, c'è sempre una sintassi alternativa:

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

Prova la libreria sprintf (un'implementazione sprintf JavaScript open source completa). Per esempio:

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

vsprintf accetta una serie di argomenti e restituisce una stringa formattata.

Uso questo modello in molte lingue quando non so ancora come farlo correttamente e voglio solo un'idea in fretta:

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

Anche se non particolarmente efficiente, lo trovo leggibile. Funziona sempre ed è sempre disponibile:

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

SEMPRE

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

Potresti usare il sistema di template di Prototype se hai davvero voglia di usare una mazza per rompere un dado:

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

Puoi fare facilmente usando ES6 template stringe traspilare in ES5 usando qualsiasi transpilar disponibile come babele.

const age = 3;

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

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

Prova kiwi , un modulo JavaScript leggero per l'interpolazione delle stringhe.

Tu puoi fare

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

o

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

Se vuoi interpolare in console.logoutput, allora basta

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

Ecco, %squello che viene chiamato un "identificatore di formato". console.logha questo tipo di supporto di interpolazione integrato.

Ecco una soluzione che richiede di fornire un oggetto con i valori. Se non si fornisce un oggetto come parametro, verrà utilizzato per impostazione predefinita variabili globali. Ma meglio attenersi all'utilizzo del parametro, è molto più pulito.

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>

Espandendo la seconda risposta di Greg Kindel , è possibile scrivere una funzione per eliminare alcune parti della caldaia:

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

Uso:

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

Posso mostrarti un esempio:

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

Da ES6, se si desidera eseguire l'interpolazione di stringhe nelle chiavi degli oggetti, si otterrà un SyntaxError: expected property name, got '${'se si esegue qualcosa del tipo:

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

Dovresti invece fare quanto segue:

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

Supplenti di più per la versione ES6 del post di @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."

L'uso della sintassi del modello non riesce nei browser meno recenti, importante se si sta creando HTML per uso pubblico. L'uso della concatenazione è noioso e difficile da leggere, in particolare se si hanno molte o lunghe espressioni o se è necessario utilizzare le parentesi per gestire miscele di elementi numerici e stringa (entrambi i quali utilizzano l'operatore +).

PHP espande le stringhe tra virgolette contenenti variabili e persino alcune espressioni usando una notazione molto compatta: $a="the color is $color";

In JavaScript, una funzione efficiente può essere scritta per supportare questo:, var a=S('the color is ',color);usando un numero variabile di argomenti. Sebbene in questo esempio non vi sia alcun vantaggio rispetto alla concatenazione, quando le espressioni si allungano, questa sintassi può essere più chiara. Oppure si può usare il simbolo del dollaro per segnalare l'inizio di un'espressione usando una funzione JavaScript, come in PHP.

D'altra parte, scrivere un'efficace funzione alternativa per fornire l'espansione delle stringhe simile a un modello per i browser più vecchi non sarebbe difficile. Qualcuno probabilmente l'ha già fatto.

Infine, immagino che sprintf (come in C, C ++ e PHP) possa essere scritto in JavaScript, anche se sarebbe un po 'meno efficiente di queste altre soluzioni.

Interpolazione flessibile personalizzata:

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>

Mentre i modelli sono probabilmente i migliori per il caso che descrivi, se hai o desideri i tuoi dati e / o argomenti in forma iterabile / array, puoi usare String.raw.

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

Con i dati come array, è possibile utilizzare l'operatore spread:

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

Impossibile trovare quello che cercavo, quindi l'ho trovato -

Se stai usando Node.js, c'è un utilpacchetto integrato con una funzione di formattazione che funziona in questo modo:

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

Per coincidenza, questo è ora integrato anche nei console.logsapori in Node.js -

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