Рассмотрим этот код:

var age = 3;

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

Существуют ли другие способы вставки значения переменной в строку, кроме конкатенации строк?

Начиная с ES6, вы можете использовать литералы шаблона :

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

PS Обратите внимание на использование обратных кавычек: ``.

ТЛ; др

Используйте строковые литералы шаблона 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 , это будет реализовано для базовой поддержки, начиная со следующих версий: Firefox 34, Chrome 41, Internet Explorer 12. Если вы являетесь пользователем Opera, Safari или Internet Explorer и вам интересно это сейчас , этот тест кровать может использоваться , чтобы играть вокруг , пока все не получает поддержку для этого.

JavaScript Дугласа Крокфорда « Исправление» включает в себя String.prototype.supplantфункцию. Это короткий, знакомый и простой в использовании:

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

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

Предостережение: избегайте любой системы шаблонов, которая не позволяет вам избежать своих собственных разделителей. Например, не было бы возможности вывести следующее, используя 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 (полная реализация JavaScript с открытым исходным кодом sprintf). Например:

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

vsprintf принимает массив аргументов и возвращает отформатированную строку.

Я использую этот шаблон на многих языках, когда я еще не знаю, как это сделать правильно, и просто хочу быстро изложить идею:

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

Хотя это не особенно эффективно, я нахожу это читабельным. Это всегда работает и всегда доступно:

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

Вы можете использовать систему шаблонов Prototype, если вам действительно хочется использовать кувалду, чтобы сломать орех:

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

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

const age = 3;

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

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

Попробуйте kiwi , легкий модуль JavaScript для интерполяции строк.

Ты можешь сделать

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

или

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

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

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

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

Вот решение, которое требует от вас предоставить объекту значения. Если вы не предоставите объект в качестве параметра, он по умолчанию будет использовать глобальные переменные. Но лучше придерживаться параметра, это намного чище.

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>

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

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

Начиная с ES6, если вы хотите выполнить интерполяцию строк в ключах объектов, вы получите, SyntaxError: expected property name, got '${'если сделаете что-то вроде:

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

Вместо этого вы должны сделать следующее:

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

Замените больше для ES6- версии сообщения @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."

Использование синтаксиса шаблона не работает в старых браузерах, что важно, если вы создаете HTML для публичного использования. Использование конкатенации является утомительным и трудным для чтения, особенно если у вас много или длинные выражения, или если вы должны использовать скобки для обработки сочетаний чисел и строковых элементов (оба из которых используют оператор +).

PHP расширяет строки в кавычках, содержащие переменные и даже некоторые выражения, используя очень компактную запись: $a="the color is $color";

В JavaScript эффективная функция может быть написана для поддержки этого: var a=S('the color is ',color);с использованием переменного числа аргументов. Хотя в этом примере нет преимуществ перед конкатенацией, когда выражения становятся длиннее, этот синтаксис может быть более понятным. Или можно использовать знак доллара, чтобы обозначить начало выражения с помощью функции JavaScript, как в PHP.

С другой стороны, написание эффективной обходной функции для обеспечения подобного шаблону расширения строк для старых браузеров не составило бы труда. Кто-то, вероятно, уже сделал это.

Наконец, я представляю, что sprintf (как в C, C ++ и PHP) может быть написан на JavaScript, хотя он будет немного менее эффективным, чем эти другие решения.

Пользовательская гибкая интерполяция:

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>

Хотя шаблоны, вероятно, лучше всего подходят для описываемого вами случая, если у вас есть или вы хотите получить свои данные и / или аргументы в форме итерируемого / массива, вы можете их использовать String.raw.

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

С данными в виде массива можно использовать оператор распространения:

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

Не смог найти то, что искал, потом нашел -

Если вы используете Node.js, есть встроенный utilпакет с функцией форматирования, который работает следующим образом:

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

По совпадению это теперь встроено в console.logароматы также в Node.js -

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