11

Estou com dificuldades para fazer uma função em JavaScript que eu passe uma string e um objeto e ele preencha essa string com os atributos daquele objeto, por exemplo:

var user = {
    nome: "danilo", 
    idade: 29
};
var a = "Meu nome é ${nome}, e tenho ${idade} anos";
4

4 Respostas 4

20

Utilizando as chamadas Strings de Template, disponíveis como um dos módulos do ECMAScript 2015 (ES6) e que já está disponível na grande maioria dos navegadores, você poderia fazer desta forma:

var user = {
    nome: "danilo", 
    idade: 29
};
var a = `Meu nome é ${user.nome}, e tenho ${user.idade} anos`;

Ou ainda:

with(user) {
    a = `Meu nome é ${nome}, e tenho ${idade} anos`;
}

Note que as aspas invertidas foram utilizadas para englobar esta string, visto que esta é a sintaxe que deve ser utilizada quando se trabalha com strings de template.

13

JavaScript atualmente implementado nos navegadores não suporta string interpolation,. Tem que fazer assim:

"Meu nome é " + nome + ", e tenho " + idade + " anos"

Ou usar a função criada pelo Douglas Crockford:

String.prototype.concatenar = (a) => this + a;

String.prototype.supplant = function (o) {
    return this.replace(/\${([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

console.log("Meu nome é ${nome}, e tenho ${idade} anos".supplant({ nome: "danilo", idade : 29 }));

Coloquei no GitHub para referência futura.

2
  • Resolveu meu problema sem precisar instalar nenhuma lib adicional. Excelente! Fiquei na dúvida só sobre como funciona esse "String.prototype", é uma extensão? Onde leio mais sobre isso?
    – rodrigorf
    Commented 30/03/2017 às 11:28
  • O prototype está em todo objeto. pt.stackoverflow.com/search?q=%5Bjavascript%5D+prototype
    – Maniero
    Commented 30/03/2017 às 11:31
7

O ES2015 já tem sua própria estrutura de template string, mas enquanto não temos compatibilidade em todos os navegadores, pode usar algo como isso:

var data = {
    host: 'twitter.com',
    port: '80',
    user: 'henricavalcante'
};

var a = "http://${host}:${port}/${user}";

var c = a.split('$').map(function(a) {
    if (a.substr(0,1) !== '{') {
        return a;
    }
    var key = a.substring(1,a.indexOf('}'));
    return a.replace('{'+key+'}', data[key]);
}).join('');

console.log(c); // http://twitter.com/henricavalcante
1
-2

Vanilla JS:

String.prototype.format = function (args) {
    var text = this
    for(var attr in args){
        text = text.split('${' + attr + '}').join(args[attr]);
    }
    return text
};

json = {'who':'Gendry', 'what':'will sit', 'where':'in the Iron Throne'}
text = 'GOT: ${who} ${what} ${where}';

console.log('context: ',json);
console.log('template: ',text);
console.log('formated: ',text.format(json));

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .