es6 - template string javascript loop



Como posso fazer interpolação de string em JavaScript? (12)

tl; dr

Use Literais de Seqüências de Templates do ECMAScript 2015, se aplicável.

Explicação

Não existe uma maneira direta de fazê-lo, de acordo com as especificações do ECMAScript 5, mas o ECMAScript 6 possui developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , que também eram conhecidas como quasi-literals durante a elaboração da especificação. Use-os assim:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

Você pode usar qualquer expressão JavaScript válida dentro do {} . Por exemplo:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

A outra coisa importante é que você não precisa mais se preocupar com sequências de várias linhas. Você pode escrevê-los simplesmente como

> `foo
...     bar`
'foo\n    bar'

Nota: Eu usei o io.js v2.4.0 para avaliar todas as sequências de modelos mostradas acima. Você também pode usar o Chrome mais recente para testar os exemplos mostrados acima.

Nota: As especificações do ES6 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… estão developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… , mas ainda precisam ser implementadas pelos principais navegadores.
De acordo com as páginas da Mozilla Developer Network , isso será implementado para suporte básico a partir das seguintes versões: Firefox 34, Chrome 41, Internet Explorer 12. Se você é usuário do Opera, Safari ou Internet Explorer e está curioso sobre isso agora Esta cama de teste pode ser usada para brincar até que todos tenham apoio para isso.

https://src-bin.com

Considere este código:

var age = 3;

console.log("I'm " + age + " years old!");

Existem outras maneiras de inserir o valor de uma variável em uma string, além da concatenação de string?


Answer #1

Aqui está uma solução que requer que você forneça um objeto com os valores. Se você não fornecer um objeto como parâmetro, o padrão será usar variáveis ​​globais. Mas é melhor usar o parâmetro, é muito mais limpo.

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>


Answer #2

Desde o ES6, você pode usar literais de modelo :

let age = 3;
console.log(`I'm ${age} years old!`);

PS Note o uso de backticks: `` .


Answer #3

Eu posso te mostrar um exemplo:

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'));


Answer #4

Expandindo a segunda resposta de Greg Kindel , você pode escrever uma função para eliminar parte do clichê:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Uso:

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!');

Answer #5

Experimente o kiwi , um módulo JavaScript leve para interpolação de strings.

Você pode fazer

Kiwi.compose("I'm % years old!", [age]);

ou

Kiwi.compose("I'm %{age} years old!", {"age" : age});

Answer #6

O uso de sintaxe de modelo falha em navegadores mais antigos, importante se você estiver criando HTML para uso público. Usar a concatenação é tedioso e difícil de ler, especialmente se você tiver muitas ou longas expressões, ou se precisar usar parênteses para manipular misturas de itens numéricos e de string (ambos usam o operador +).

O PHP expande as strings citadas contendo variáveis ​​e até algumas expressões usando uma notação muito compacta: $a="the color is $color";

Em JavaScript, uma função eficiente pode ser escrita para suportar isso: var a=S('the color is ',color); , usando um número variável de argumentos. Embora não haja vantagem sobre a concatenação neste exemplo, quando as expressões ficarem mais longas, essa sintaxe pode ficar mais clara. Ou pode-se usar o cifrão para sinalizar o início de uma expressão usando uma função JavaScript, como no PHP.

Por outro lado, escrever uma função de solução eficiente para fornecer expansão de strings como modelo para navegadores mais antigos não seria difícil. Alguém provavelmente já fez isso.

Por fim, imagino que sprintf (como em C, C ++ e PHP) poderia ser escrito em JavaScript, embora fosse um pouco menos eficiente do que essas outras soluções.


Answer #7

Outra marreta: jquery-tmpl (modelagem com jQuery).


Answer #8

Se você quiser interpolar na saída console.log , então apenas

console.log("Eruption 1: %s", eruption1);
                         ^^

Aqui, %s é o que é chamado de "especificador de formato". console.log tem esse tipo de suporte de interpolação embutido.


Answer #9

Tente sprintf . Por exemplo:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

Answer #10

Você poderia usar o sistema de templates do Prototype se realmente sentir vontade de usar uma marreta para quebrar uma noz:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

Answer #11

use ` ( acentos graves também conhecidos como backtick ) em vez de aspas simples ( ' ) ou aspas duplas ( " ) e o sinal de cifrão / parêntese ${ variable }

Por exemplo:

console.log(
  `current date: ${new Date()}`
);

Leia mais sobre os literais de modelo aqui .





string-interpolation