Come posso eseguire l'interpolazione di stringhe in JavaScript?

Question

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?

Answer 1

Da ES6, puoi utilizzare valori letterali modello :

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

P.S. Nota l'uso di backtick: `` .

Answer 2

tl; dr

Utilizza i Letter Liter String per modelli di ECMAScript 2015, se applicabile.

Spiegazione

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

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

Puoi usare qualsiasi espressione JavaScript valida all'interno del {} . Ad 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 implementati da tutti i principali browser.
Secondo le pagine della rete di sviluppatori Mozilla , 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 ottengono supporto per questo.

Answer 3

JavaScript correttivo di Douglas Crockford include un String.prototype.supplant funzione. È 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.

Answer 4

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 metodo supplant () 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(" ");

Answer 5

Prova sprintf . Ad esempio:

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

Answer 6

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

Answer 7

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

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

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'

Answer 8

Puoi fare facilmente usando ES6 template string e traspilare in ES5 usando qualsiasi transpilar disponibile come babel.

const age = 3;

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

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

Answer 9

Prova kiwi , una luce- peso modulo JavaScript per l'interpolazione di stringhe.

Puoi farlo

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

o

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

Answer 10

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>

Answer 11

usa ` ( accenti gravi anche conosciuti come backtick ) anziché virgolette singole ( ') o virgolette doppie ( " ) e il simbolo del dollaro / parentesi $ {variabile}

Ad esempio:

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

Ulteriori informazioni sui modelli letterali qui .

Answer 12

Se vuoi interpolare nell'output console.log , allora

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

Qui, % s è ciò che viene chiamato un "identificatore di formato". console.log ha questo tipo di supporto di interpolazione incorporato.

Answer 13

Espandendo la seconda risposta di Greg Kindel , puoi scrivere una funzione per eliminare parte del boilerplate:

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

Utilizzo:

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

Answer 14

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

Answer 15

Da ES6, se si desidera eseguire l'interpolazione di stringhe nelle chiavi degli oggetti, si otterrà un SyntaxError: nome della proprietà previsto, ottenuto '$ {' se si esegue qualcosa del tipo:

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

Dovresti invece fare quanto segue:

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

Answer 16

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 hai molte o lunghe espressioni o se devi usare 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 = " il colore è $ color " ;;

In JavaScript, una funzione efficiente può essere scritta per supportare questo: var a = S ('il colore è', colore); , 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) potrebbe essere scritto in JavaScript, anche se sarebbe un po 'meno efficiente di queste altre soluzioni.

Answer 17

  

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