Рассмотрим этот код:
var age = 3;
console.log("I'm " + age + " years old!");
Существуют ли другие способы вставки значения переменной в строку, кроме конкатенации строк?
javascript
string
string-interpolation
Том Леман
источник
источник
Show GRAPH of : ${fundCode}-${funcCode}
получает меняShow GRAPH of : AIP001-_sma
(используйте галочки вокруг строки 1 .... не может отображаться здесь)Ответы:
Начиная с ES6, вы можете использовать литералы шаблона :
PS Обратите внимание на использование обратных кавычек:
``
.источник
ТЛ; др
Используйте строковые литералы шаблона ECMAScript 2015, если это применимо.
объяснение
Не существует прямого способа сделать это, согласно спецификациям ECMAScript 5, но ECMAScript 6 имеет строки шаблонов , которые также были известны как квази-литералы при разработке спецификации. Используйте их так:
Вы можете использовать любое допустимое выражение JavaScript внутри
{}
. Например:Еще одна важная вещь: вам больше не нужно беспокоиться о многострочных строках. Вы можете написать их просто как
Примечание: я использовал 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, вы всегда можете адаптировать его, чтобы он был автономным, или поместил его в какое-то другое пространство имен или что-то еще.
источник
"The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo'])
Предостережение: избегайте любой системы шаблонов, которая не позволяет вам избежать своих собственных разделителей. Например, не было бы возможности вывести следующее, используя
supplant()
метод, упомянутый здесь.Простая интерполяция может работать для небольших автономных скриптов, но часто сопровождается этим недостатком дизайна, который ограничивает любое серьезное использование. Я честно предпочитаю шаблоны DOM, такие как:
И используйте манипуляции jQuery:
$('#age').text(3)
С другой стороны, если вы просто устали от конкатенации строк, всегда есть альтернативный синтаксис:
источник
Array.join()
медленнее, чем прямое (+
стилевое) объединение, потому что движки браузера (который включает в себя V8, который включает в себя узел и почти все, что сегодня работает с JS) значительно оптимизировали его, и существует большая разница в пользу прямого объединенияtoken
- таким образом, при условии, что вы не предоставите объект данных, в котором естьage
член, все будет в порядке.supplant
неоправданно:"I am 3 years old thanks to my {age} variable.".supplant({}));
возвращает именно заданную строку. Если быage
дали, можно было бы распечатать{
и}
использовать{{age}}
Попробуйте библиотеку sprintf (полная реализация JavaScript с открытым исходным кодом sprintf). Например:
vsprintf принимает массив аргументов и возвращает отформатированную строку.
источник
Я использую этот шаблон на многих языках, когда я еще не знаю, как это сделать правильно, и просто хочу быстро изложить идею:
Хотя это не особенно эффективно, я нахожу это читабельным. Это всегда работает и всегда доступно:
ВСЕГДА
источник
Вы можете использовать систему шаблонов Prototype, если вам действительно хочется использовать кувалду, чтобы сломать орех:
источник
Вы можете легко использовать ES6
template string
и перейти к ES5, используя любой доступный транспилар, например babel.http://www.es6fiddle.net/im3c3euc/
источник
Попробуйте kiwi , легкий модуль JavaScript для интерполяции строк.
Ты можешь сделать
или
источник
Если вы хотите интерполировать в
console.log
выводе, то простоВот то,
%s
что называется «спецификатором формата».console.log
имеет такую встроенную поддержку интерполяции.источник
Вот решение, которое требует от вас предоставить объекту значения. Если вы не предоставите объект в качестве параметра, он по умолчанию будет использовать глобальные переменные. Но лучше придерживаться параметра, это намного чище.
источник
eval
,eval
это зло!eval
, но иногда нет. Например, если операционному оператору нужен способ интерполяции с использованием текущей области, без необходимости передавать объект поиска (например, как работает Groovy-интерполяция), я почти уверен,eval
что потребуется. Не просто прибегайте к старому "eval is evil".eval
это единственный способ получить доступ к локальным переменным в области видимости . Так что не отвергайте это только потому, что это ранит ваши чувства. Кстати, я также предпочитаю альтернативный способ, потому что он безопаснее, но именно этотeval
метод точно отвечает на вопрос OP, поэтому он и есть в ответе.eval
том, что он не может получить доступ к переменным из другой области, поэтому, если ваш.interpolate
вызов находится внутри другой функции и не является глобальным, он не будет работать.Расширяя второй ответ Грега Кинделя , вы можете написать функцию, чтобы устранить некоторые из шаблонов:
Применение:
источник
Я могу показать вам пример:
источник
Начиная с ES6, если вы хотите выполнить интерполяцию строк в ключах объектов, вы получите,
SyntaxError: expected property name, got '${'
если сделаете что-то вроде:Вместо этого вы должны сделать следующее:
источник
источник
Использование синтаксиса шаблона не работает в старых браузерах, что важно, если вы создаете HTML для публичного использования. Использование конкатенации является утомительным и трудным для чтения, особенно если у вас много или длинные выражения, или если вы должны использовать скобки для обработки сочетаний чисел и строковых элементов (оба из которых используют оператор +).
PHP расширяет строки в кавычках, содержащие переменные и даже некоторые выражения, используя очень компактную запись:
$a="the color is $color";
В JavaScript эффективная функция может быть написана для поддержки этого:
var a=S('the color is ',color);
с использованием переменного числа аргументов. Хотя в этом примере нет преимуществ перед конкатенацией, когда выражения становятся длиннее, этот синтаксис может быть более понятным. Или можно использовать знак доллара, чтобы обозначить начало выражения с помощью функции JavaScript, как в PHP.С другой стороны, написание эффективной обходной функции для обеспечения подобного шаблону расширения строк для старых браузеров не составило бы труда. Кто-то, вероятно, уже сделал это.
Наконец, я представляю, что sprintf (как в C, C ++ и PHP) может быть написан на JavaScript, хотя он будет немного менее эффективным, чем эти другие решения.
источник
Пользовательская гибкая интерполяция:
источник
Хотя шаблоны, вероятно, лучше всего подходят для описываемого вами случая, если у вас есть или вы хотите получить свои данные и / или аргументы в форме итерируемого / массива, вы можете их использовать
String.raw
.С данными в виде массива можно использовать оператор распространения:
источник
Не смог найти то, что искал, потом нашел -
Если вы используете Node.js, есть встроенный
util
пакет с функцией форматирования, который работает следующим образом:По совпадению это теперь встроено в
console.log
ароматы также в Node.js -источник