Розглянемо цей код:

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 , це буде реалізовано для основної підтримки, починаючи з наступних версій: 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 (повна реалізація sprintf з відкритим кодом). Наприклад:

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

vsprintf приймає масив аргументів і повертає відформатований рядок.

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

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'

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

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

Якщо ви хочете інтерполювати у 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