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

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

420 голосов
/ 11 сентября 2009

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

var age = 3;

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

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

Ответы [ 17 ]

5 голосов
/ 29 августа 2017

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

Например: 

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

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

4 голосов
/ 26 июля 2015

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

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

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

2 голосов
/ 01 января 2016

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

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!');
1 голос
/ 01 марта 2019

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

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

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

let obj = { [`${age}`]: 3 }
1 голос
/ 18 ноября 2017

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

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'));
0 голосов
/ 29 апреля 2019

Замените больше для 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."
0 голосов
/ 27 ноября 2018

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

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

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

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

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

Страница:
...