JavaScript에서 문자열 보간을하려면 어떻게해야합니까?

Question

이 코드를 고려하십시오.

var age = 3;

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

문자열 연결과는 별도로 변수의 값을 문자열에 삽입하는 다른 방법이 있습니까?

Answer 1

ES6 이후로 사용할 수 있습니다 템플릿 리터럴:

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

추신 백 틱 사용에 유의하십시오. ``.

Answer 2

tl; dr

적용 가능한 경우 ECMAScript 2015의 Template String Literals를 사용하십시오.

설명

ECMAScript 5 사양에 따라 직접적인 방법은 없지만 ECMAScript 6은 템플릿 문자열, 또한 알려진 준-문학 사양의 제도 중. 다음과 같이 사용하십시오.

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

내부에 유효한 JavaScript 표현식을 사용할 수 있습니다 {}. 예를 들어:

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

또 다른 중요한 것은 더 이상 멀티 라인 문자열에 대해 걱정할 필요가 없다는 것입니다. 당신은 그들을 간단히 쓸 수 있습니다

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

메모: IO.JS v2.4.0을 사용하여 위에 표시된 모든 템플릿 문자열을 평가했습니다. 최신 크롬을 사용하여 위의 위에 표시된 예제를 테스트 할 수도 있습니다.

메모: ES6 사양입니다 이제 마무리되었습니다, 그러나 모든 주요 브라우저에서는 아직 구현되지 않았습니다.
에 따르면 모질라 개발자 네트워크 페이지, 이것은 Firefox 34, Chrome 41, Internet Explorer 12에서 시작하는 기본 지원을 위해 구현 될 것입니다. 이 테스트 베드 모두가 이것에 대한 지원을받을 때까지 놀 수 있습니다.

Answer 3

Douglas Crockford 's 치료 자바 스크립트 포함 String.prototype.supplant 기능. 짧고 친숙하며 사용하기 쉽습니다.

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

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

String의 프로토 타입을 변경하지 않으려면 언제든지 독립형으로 적응하거나 다른 네임 스페이스 등에 배치 할 수 있습니다.

Answer 4

주의 단어 : 자체 구분자를 피할 수없는 템플릿 시스템을 피하십시오. 예를 들어, 다음을 사용하여 다음을 출력 할 수있는 방법이 없습니다. supplant() 여기에 언급 된 방법.

"{age} 변수 덕분에 3 살입니다."

간단한 보간은 작은 자체 포함 스크립트에 효과가있을 수 있지만 종종이 설계 결함이있어 심각한 사용을 제한합니다. 나는 솔직히 다음과 같은 DOM 템플릿을 선호합니다.

<div> I am <span id="age"></span> years old!</div>

jQuery 조작을 사용하십시오. $('#age').text(3)

또는 단순히 문자열 연결에 지친 경우 항상 대체 구문이 있습니다.

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Answer 5

노력하다 Sprintf. 예를 들어:

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

Answer 6

당신은 사용할 수 있습니다 프로토 타입의 템플릿 시스템 정말로 너트를 부수기 위해 슬레 즈 해머를 사용하고 싶다고 생각한다면 :

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

Answer 7

아직 제대로 수행하는 방법을 모르고 아이디어를 빨리 내려 놓고 싶을 때이 패턴을 많은 언어로 사용합니다.

// JavaScript
var stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

특히 효율적이지는 않지만 읽을 수 있습니다. 항상 작동하며 항상 사용할 수 있습니다.

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

언제나

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

Answer 8

ES6을 쉽게 사용할 수 있습니다 template string 및 바벨과 같은 이용 가능한 트랜스 파르를 사용하여 ES5로 변환합니다.

const age = 3;

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

http://www.es6fiddle.net/im3c3euc/

Answer 9

노력하다 키위, 문자열 보간을위한 가벼운 JavaScript 모듈.

넌 할 수있어

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

또는

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

Answer 10

값을 객체에 제공 해야하는 솔루션은 다음과 같습니다. 객체를 매개 변수로 제공하지 않으면 글로벌 변수를 사용하는 것이 기본값입니다. 그러나 매개 변수를 사용하는 것이 더 낫습니다. 훨씬 깨끗합니다.

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 11

사용 ` (백티크라고도하는 무덤 악센트) 단일 견적 대신 (') 또는 이중 견적 (") 및 달러 사인/브래킷 사인 ${ variable }

예를 들어:

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

템플릿 리터럴에 대해 자세히 알아보십시오 여기.

Answer 12

보간하고 싶다면 console.log 출력, 그럼 그냥

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

여기, %s "형식 지정자"라고합니다. console.log 이러한 종류의 보간 지원이 내장되어 있습니다.

Answer 13

확장 Greg Kindel 's 두 번째 대답, 일부 보일러 플레이트를 제거하기위한 함수를 작성할 수 있습니다.

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

용법:

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 14

예를 들어 보여줄 수 있습니다.

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 15

ES6이므로 객체 키에서 문자열 보간을하고 싶다면 SyntaxError: expected property name, got '${' 당신이 다음과 같은 일을한다면 :

let age = 3
let obj = { `${age}`: 3 }

대신 다음을 수행해야합니다.

let obj = { [`${age}`]: 3 }

Answer 16

템플릿 구문 사용은 이전 브라우저에서 실패합니다. 공개적으로 HTML을 만드는 경우 중요합니다. 특히 표현이 많거나 긴 표현이 있거나 괄호를 사용하여 숫자와 문자열 항목 (둘 다 + 연산자를 사용)을 처리 해야하는 경우 연결을 사용하는 것은 지루하고 읽기가 어렵습니다.

PHP는 변수를 포함하는 인용 된 문자열과 매우 작곡 표기법을 사용하여 일부 표현식을 확장합니다. $a="the color is $color";

JavaScript에서는 효율적인 기능을 작성하여 다음을 지원할 수 있습니다. var a=S('the color is ',color);, 변수 수의 인수를 사용합니다. 이 예에서는 연결보다 이점이 없지만 표현식이 더 길어지면이 구문이 더 명확해질 수 있습니다. 또는 PHP에서와 같이 JavaScript 함수를 사용하여 표현식의 시작을 알리기 위해 달러 표시를 사용하여 표현의 시작을 알 수 있습니다.

반면에, 오래된 브라우저에 대한 템플릿과 유사한 문자열 확장을 제공하기 위해 효율적인 해결 방법을 작성하는 것은 어렵지 않습니다. 누군가 이미 그것을했을 것입니다.

마지막으로, Sprintf (C, C ++ 및 PHP에서와 같이)는 JavaScript로 작성 될 수 있지만 다른 솔루션보다 약간 덜 효율적일 것입니다.

Answer 17

더 많은 것을 대체하십시오 ES6 @chris nielsen의 게시물 버전.

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

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."