Jak interpolować zmienne w łańcuchach w JavaScript, bez konkatenacji?

Question

wiem w PHP możemy zrobić coś takiego:

$hello = "foo"; 
$my_string = "I pity the $hello"; 

wyjściowa: "I pity the foo"

Zastanawiałem się, czy to samo jest możliwe w JavaScript również. Używanie zmiennych wewnątrz ciągów bez użycia konkatenacji - jest bardziej zwięzłe i eleganckie w pisaniu.

Answer 1

Zaczynając od Firefoksa 34/Chrome 41/Safari 9/Microsoft Edge można użyć ES2015/funkcja ES6 nazwie Template Literals i używać tej składni:

`String text ${expression}` 

Literały szablonów są dołączane przez tylny znacznik (``) (akcent grobowy) zamiast podwójnych lub pojedynczych cudzysłowów.

Przykład:

var a = 5; 
var b = 10; 
console.log(`Fifteen is ${a + b}.`); 
// "Fifteen is 15. 

Jak miłe jest to, że?

Bonus:

Pozwala także na smyczki multi-line w JavaScript bez ucieczki, który jest idealny dla szablonów:

return ` 
    <div class="${foo}"> 
     ... 
    </div> 
`; 

Browser support:

Ponieważ składnia nieobsługiwany przez starsze przeglądarki (Internet Explorer i Safari < = 8), możesz użyć Babel, aby przenieść swój kod do ES5, aby mieć pewność, że będzie działał wszędzie.

---

Notatka:

Począwszy od IE8 + można użyć podstawowy ciąg formatowanie wewnątrz console.log:

console.log('%s is %d.', 'Fifteen', 15); 
// Fifteen is 15. 

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, nie, nie było to możliwe w javascript. Trzeba by uciekać się do:

var hello = "foo"; 
var my_string = "I pity the " + hello; 

Answer 3

Prior to Firefox 34/Chrome 41/9/Safari Microsoft Edge, nie. Chociaż można spróbować sprintf for JavaScript dostać w połowie drogi:

var hello = "foo"; 
var my_string = sprintf("I pity the %s", hello); 

Answer 4

Jeśli próbujesz zrobić interpolacji dla microtemplating, lubię Mustache.js do tego celu.

Answer 5

dobrze można to zrobić, ale to nie jest esp ogóle

'I pity the $fool'.replace('$fool', 'fool') 

Można łatwo napisać funkcję, która robi to inteligentnie, jeśli naprawdę potrzebne do

Answer 6

Jeśli lubisz pisać coffeescript można zrobić:

hello = "foo" 
my_string = "I pity the #{hello}" 

CoffeeScript faktycznie JEST JAVAV ript, ale o znacznie lepszej składni.

Aby zapoznać się z przeglądem CoffeeScript, sprawdź to beginner's guide.

Answer 7

Możesz użyć tej funkcji javascript do tego typu szablonów. Nie trzeba uwzględniać całej biblioteki.

function createStringFromTemplate(template, variables) { 
    return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){ 
     return variables[varName]; 
    }); 
} 

createStringFromTemplate(
    "I would like to receive email updates from {list_name} {var1} {var2} {var3}.", 
    { 
     list_name : "this store", 
     var1  : "FOO", 
     var2  : "BAR", 
     var3  : "BAZ" 
    } 
); 

wyjściowy: "I would like to receive email updates from this store FOO BAR BAZ."

Stosując funkcję jako argument funkcji string.replace() jest częścią ECMAScript v3 spec. Aby uzyskać więcej informacji, patrz this SO answer.

Answer 8

pełna odpowiedź, gotowy do użycia:

var Strings = { 
     create : (function() { 
       var regexp = /{([^{]+)}/g; 

       return function(str, o) { 
        return str.replace(regexp, function(ignore, key){ 
          return (key = o[key]) == null ? '' : key; 
        }); 
       } 
     })() 
}; 

zadzwonić jako

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'}); 

Aby dołączyć go do String.prototype:

String.prototype.create = function(o) { 
      return Strings.create(this, o); 
} 

Następnie użyj jako:

"My firstname is ${first}".create({first:'Neo'}); 

Answer 9

pisałem ten pakiet npm stringinject https://www.npmjs.com/package/stringinject który pozwala wykonać następujące czynności

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]); 

który zastąpi {0} i {1} z elementów tablicy i zwraca następujący ciąg

"this is a test string for stringInject" 

czy można zastąpić symbole zastępcze z kluczami przedmiotu i wartości tak:

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

"My username is tjcafferkey on Github" 

Answer 10

Dobrze, możesz użyć this is ${variable} lub możesz użyć "this is "+variable Oba te działają dobrze.

również pamiętać, aby używać Tilda (``) klucz wokół this is ${variable} zamiast "lub"