Подтвердить что ты не робот

Форматировать строку JavaScript с использованием заполнителей и объекта замещений?

У меня есть строка с сообщением: My Name is %NAME% and my age is %AGE%.

%XXX% являются заполнителями. Нам нужно подставить значения из объекта.

Объект выглядит так: {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"}

Мне нужно проанализировать объект и заменить строку соответствующими значениями. Таким образом, конечный вывод будет:

Мое имя - Майк, а мой возраст - 26 лет.

Все это должно быть сделано либо с использованием чистого javascript или jquery.

4b9b3361

Ответ 1

Очевидно, что требования исходного вопроса не могли выиграть от интерполяции строк, так как кажется, что это обработка произвольных ключей замены во время выполнения.

Однако, если вам просто нужно было выполнить интерполяцию строк, вы можете использовать:

const str = 'My name is ${replacements.name} and my age is ${replacements.age}.'

Обратите внимание на галочки, ограничивающие строку, они обязательны.


Для ответа, соответствующего конкретному требованию OP, вы можете использовать String.prototype.replace() для замен.

Следующий код будет обрабатывать все совпадения, а не касаться их без замены (если ваши значения замещения являются строками, если нет, см. Ниже).

var replacements = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"},
    str = 'My Name is %NAME% and my age is %AGE%.';

str = str.replace(/%\w+%/g, function(all) {
   return replacements[all] || all;
});

jsFiddle.

Если некоторые из ваших замен не являются строками, сначала убедитесь, что они существуют в объекте. Если у вас есть формат, подобный примеру, то есть, заключенный в знаки процента, вы можете использовать оператор in для достижения этого.

jsFiddle.

Однако, если ваш формат не имеет специального формата, т.е. какой-либо строки, а ваш объект-заменители не имеет null прототипа, используйте Object.prototype.hasOwnProperty(), если только вы не можете гарантировать, что ни одна из ваших потенциальных замененных подстрок не будет Коллизия с именами свойств по прототипу.

jsFiddle.

В противном случае, если вашей заменяющей строкой будет 'hasOwnProperty', вы получите результирующую испорченную строку.

jsFiddle.


Как примечание, вы должны называться replacements Object, а не Array.

Ответ 3

Вы можете использовать JQuery (jquery.validate.js), чтобы он работал легко.

$.validator.format("My name is {0}, I'm {1} years old",["Bob","23"]);

Или, если вы хотите использовать только эту функцию, вы можете определить эту функцию и просто использовать ее как

function format(source, params) {
    $.each(params,function (i, n) {
        source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
    })
    return source;
}
alert(format("{0} is a {1}", ["Michael", "Guy"]));

кредит команде jquery.validate.js

Ответ 4

Как и в случае с современным браузером, заполнитель поддерживается новой версией Chrome/Firefox, аналогичной функции стиля C printf().

Заменители:

  • %s Строка.
  • %d, %i Целочисленное число.
  • %f Число с плавающей запятой.
  • %o Гиперссылка объекта.

например.

console.log("generation 0:\t%f, %f, %f", a1a1, a1a2, a2a2);

BTW, , чтобы увидеть результат:

  • В Chrome используйте ярлык Ctrl + Shift + J или F12, чтобы открыть инструмент разработчика.
  • В Firefox используйте ярлык Ctrl + Shift + K, чтобы открыть инструмент разработчика. (Не используйте F12, который откроет Firebug, который больше не поддерживается, а на вкладке консоли не отображается сообщение).

Поддержка @Update - nodejs

Кажется, nodejs не поддерживает %f, вместо этого может использовать %d в nodejs. Число %d будет напечатано как плавающее число, а не целое число.

Ответ 5

Вы можете использовать пользовательскую функцию замены, например:

var str = "My Name is %NAME% and my age is %AGE%.";
var replaceData = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};

function substitute(str, data) {
    var output = str.replace(/%[^%]+%/g, function(match) {
        if (match in data) {
            return(data[match]);
        } else {
            return("");
        }
    });
    return(output);
}

var output = substitute(str, replaceData);

Вы можете увидеть, как он работает здесь: http://jsfiddle.net/jfriend00/DyCwk/.

Ответ 6

Используя bob.js, вы можете форматировать строки, похожие на С#:

var sFormat = "My name is {0} and I am version {1}.0.";
var result = bob.string.formatString(sFormat, "Bob", 1);
console.log(result);
//output:
//==========
// My name is Bob and I am version 1.0.

Ответ 7

Просто используйте replace()

var values = {"%NAME%":"Mike","%AGE%":"26","%EVENT%":"20"};
var substitutedString = "My Name is %NAME% and my age is %AGE%.".replace("%NAME%", $values["%NAME%"]).replace("%AGE%", $values["%AGE%"]);

Ответ 8

Если вы хотите сделать что-то ближе к console.log, например, заменяя заполнители% s, например,

>console.log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright")
>Hello Loreto how are you today is everything allright?

Я написал это

function log() {
  var args = Array.prototype.slice.call(arguments);
  var rep= args.slice(1, args.length);
  var i=0;
  var output = args[0].replace(/%s/g, function(match,idx) {
    var subst=rep.slice(i, ++i);
    return( subst );
  });
   return(output);
}
res=log("Hello %s how are you %s is everything %s?", "Loreto", "today", "allright");
document.getElementById("console").innerHTML=res;
<span id="console"/>

Ответ 10

В качестве быстрого примера:

var name = 'jack';
var age = 40;
console.log('%s is %d yrs old',name,age);

Выход:

Джеку 40 лет

Ответ 11

Вот еще один способ сделать это путем динамического использования литералов шаблона es6 во время выполнения.

const str = 'My name is ${name} and my age is ${age}.'
const obj = {name:'Simon', age:'33'}


const result = new Function('const {' + Object.keys(obj).join(',') + '} = this.obj;return '' + str + ''').call({obj})

document.body.innerHTML = result