Как я могу сделать интерполяцию строк в JavaScript?

tl; dr

используйте строковые литералы шаблона ECMAScript 2015, Если это применимо.

объяснение

нет прямого способа сделать это, согласно спецификациям ECMAScript 5, но ECMAScript 6 имеет шаблон строки, которые также были известны как квази-литералы во время составления спецификации. Используйте их так:

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

вы можете использовать любое допустимое выражение JavaScript внутри {}. Для пример:

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

другая важная вещь, вам не нужно больше беспокоиться о многострочных строках. Вы можете написать их просто как

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

Примечание: я использовал io.в JS-версии v2.4.0 оценить все строки шаблона, показанного выше. Вы также можете использовать последнюю версию Chrome для тестирования приведенных выше примеров.

Примечание: спецификации ES6 считаются завершение, но еще не реализованы на всех основных браузерах.
по словам Mozilla Developer Network pages, это будет реализовано для базовой поддержки, начиная со следующих версий: Firefox 34, Chrome 41, Internet Explorer 12. Если вы являетесь пользователем Opera, Safari или Internet Explorer и вам это интересно, этот испытательный стенд можно использовать, чтобы поиграть, пока все не получат поддержку для этого.

Дуглас Крокфорд Исправительный JavaScript включает в себя

слово предостережения: избегайте любой системы шаблонов, которая не позволяет вам избежать своих собственных разделителей. Например, не было бы никакого способа вывести следующее С помощью supplant() метод, упомянутых здесь.

" мне 3 года благодаря моей переменной {age}."

простая интерполяция может работать для небольших автономных скриптов, но часто поставляется с этим недостатком дизайна, который ограничит любое серьезное использование. Я, честно говоря, предпочитаю шаблоны 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'

обновление: я обновил версию javascript для замены все явлений, а не только первый.

Вы можете сделать легко с помощью ES6 template string и транспилировать в ES5, используя любой доступный транспилар, как Вавилон.

const age = 3;

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

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

попробовать киви, легкий модуль 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>

использовать ` (серьезные акценты также известный как backtick) вместо одинарных кавычек (') или двойные кавычки (") и знак доллара / скобка знак ${ variable }

например:

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

подробнее о шаблонных литералах здесь.

еще одна кувалда:jquery-tmpl (шаблонизация с помощью jQuery).

если вы хотите интерполировать в console.log вывод, то просто

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

здесь %s это то, что называется "спецификатор формата". console.log имеет такую встроенную поддержку интерполяции.

расширения Грег Киндель второй ответ, вы можете написать функцию для устранения некоторых шаблонных:

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

использование:

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

Я могу показать вам пример:

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