Как я могу сделать интерполяцию строк в JavaScript?
рассмотрим этот код:
var age = 3;
console.log("I'm " + age + " years old!");
есть ли другие способы вставить значение переменной в строку, кроме конкатенации строк?
15 ответов
начиная с ES6, вы можете использовать шаблон литералы:
let age = 3;
console.log(`I'm ${age} years old!`);
П. С. Примечание команда: `
.
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, это будет реализовано для базовой поддержки, начиная со следующих версий: Firefox 34, Chrome 41, Internet Explorer 12. Если вы являетесь пользователем Opera, Safari или Internet Explorer и интересуетесь этим сейчас,этот испытательный стенд может использоваться для игры, пока все не получат поддержку для этого.
слово предостережения: избегайте любой системы шаблонов, которая не позволяет избежать собственных разделителей. Например, не было бы никакого способа вывести следующее С помощью supplant()
метод, упомянутых здесь.
" мне 3 года благодаря моей переменной {age}."
простая интерполяция может работать для небольших автономных скриптов, но часто поставляется с этим недостатком дизайна, который ограничит любое серьезное использование. Я, честно говоря, предпочитаю шаблоны DOM, таких as:
<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, используя любой доступный транспилар, такой как babel.
const age = 3;
console.log(`I'm ${age} years old!`);
попробовать киви, легкий модуль 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()}`
);
подробнее о шаблонных литералах здесь.
если вы хотите интерполировать в 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'));