Как интерполировать переменные в строках JavaScript без конкатенации?
Я знаю, что в PHP можно делать что-то подобное:
$hello = "foo";
$my_string = "I pity the $hello";
Вывод: "I pity the foo"
.
Я хотел бы узнать, возможно ли сделать то же самое в JavaScript. Использовать переменные внутри строк без конкатенации — это выглядит более лаконично и элегантно.
5 ответ(ов)
Вы можете сделать это так, но это не очень универсально:
'I pity the $fool'.replace('$fool', 'fool')
Если вам действительно нужно, вы можете легко написать функцию, которая сделает это более интеллектуально.
Если вам нужно преобразовать этот код в ES6, то вот как это можно сделать.
Изменим объект Strings
и функцию create
, а затем добавим метод create
к String.prototype
. В итоге у нас получится следующий код:
const Strings = {
create: ((regexp) => {
return (str, o) => {
return str.replace(regexp, (_, key) => (key = o[key]) == null ? '' : key);
};
})(/#{([^{]+)}/g)
};
// Использование
Strings.create("My firstname is #{first}, my last name is #{last}", {first: 'Neo', last: 'Andersson'});
// Чтобы прикрепить метод к String.prototype
String.prototype.create = function(o) {
return Strings.create(this, o);
};
// Использование
"My firstname is #{first}".create({first: 'Neo'});
// Если вы используете ES6 и выше, можно сделать ещё проще:
let first = 'Neo';
console.log(`My firstname is ${first}`);
Этот код можно использовать аналогично оригинальному, но теперь он написан с использованием стрелочных функций и констант, что является более современным подходом в JavaScript. Если вы находитесь на версии ECMAScript 6 или выше, рекомендуется использовать шаблонные строки (template literals) для форматирования строк, так как это делает код более читабельным и удобным.
Я бы использовал обратные кавычки ``.
let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'
Но если вы не знаете name1
, когда создаете msg1
.
Например, если msg1
приходит из API.
Вы можете использовать:
let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'
const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
return eval(key);
});
console.log(result); // 'Hello Geoffrey'
Это заменит ${name2}
на его значение.
Обратите внимание, что использование eval
может быть небезопасным, особенно если вы обрабатываете данные из ненадежных источников. Рассмотрите возможность использования других подходов для подстановки значений.
Вы можете использовать пакет npm stringinject
, который позволяет удобно заменять заполнители в строках.
Пример использования:
var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);
В этом случае {0}
и {1}
будут заменены на элементы массива, и результат будет следующим:
"this is a test string for stringInject"
Также вы можете заменять заполнители значениями из объекта. Например:
var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });
Это вернет строку:
"My username is tjcafferkey on GitHub"
Таким образом, stringinject
позволяет гибко управлять форматированием строк с помощью как массивов, так и объектов.
Не вижу упоминаний о внешних библиотеках, но в Lodash есть метод _.template()
.
Ссылка на документацию: Lodash 4.17.10 - template
Если вы уже используете эту библиотеку, стоит обратить на это внимание. Если нет, вы можете просто установить нужный метод из npm, выполнив команду npm install lodash.template
, чтобы сократить нагрузку.
Самый простой пример:
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'
Также есть множество настроек конфигурации:
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'
Мне особенно интересны пользовательские разделители.
Преобразование объекта JS в строку JSON
Как преобразовать строку, разделённую запятыми, в массив?
Определение глобальной переменной в функции JavaScript
Как заменить символ по заданному индексу в JavaScript?
Удалить первый символ строки, если он равен 0