[javascript] JavaScript에서 문자열 보간을 어떻게 수행 할 수 있습니까?

JAVASCRIPT / 글쓴이

이 코드를 고려하십시오.

var age = 3;

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

문자열 연결을 제외하고 변수 값을 문자열에 삽입하는 다른 방법이 있습니까?

답변

ES6부터 템플릿 리터럴을 사용할 수 있습니다 .

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

스 니펫 확장

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

답변

tl; dr

해당되는 경우 ECMAScript 2015의 템플릿 문자열 리터럴을 사용하십시오.

설명

ECMAScript 5 사양에 따라 직접 수행 할 수있는 방법은 없지만 ECMAScript 6에는 템플릿을 작성하는 동안 준 리터럴 이라고도하는 템플릿 문자열 이 있습니다 . 다음과 같이 사용하십시오.

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

에서 유효한 자바 스크립트 표현식을 사용할 수 있습니다 {}. 예를 들면 다음과 같습니다.

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

다른 중요한 것은 더 이상 여러 줄 문자열에 대해 걱정할 필요가 없다는 것입니다. 간단히 다음과 같이 쓸 수 있습니다

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

참고 : 위에 표시된 모든 템플릿 문자열을 평가하기 위해 io.js v2.4.0을 사용했습니다. 최신 Chrome을 사용하여 위에 표시된 예제를 테스트 할 수도 있습니다.

참고 : ES6 사양은 이제 최종 확정 되었지만 모든 주요 브라우저에서 아직 구현되지 않았습니다. Mozilla 개발자 네트워크 페이지
에 따르면 Firefox 34, Chrome 41, Internet Explorer 12 버전부터 기본 지원을 위해 구현됩니다. Opera, Safari 또는 Internet Explorer 사용자 인 경우 지금 궁금합니다. , 이 테스트 베드 는 모든 사람이 지원을받을 때까지 놀 수 있습니다.

답변

Douglas Crockford의 Remedial JavaScript 에는 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의 프로토 타입을 변경하지 않으려는 경우 언제든지 독립형으로 적용하거나 다른 네임 스페이스 또는 다른 곳에 배치 할 수 있습니다.

답변

주의 사항 : 자체 구분 기호를 벗어날 수없는 템플릿 시스템은 피하십시오. 예를 들어 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(" ");

답변

sprintf 라이브러리 (완전한 오픈 소스 JavaScript sprintf 구현)를 사용해보십시오 . 예를 들면 다음과 같습니다.

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

vsprintf 는 인수 배열을 가져 와서 형식화 된 문자열을 반환합니다.

답변

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

// JavaScript
let 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'

답변

슬레지 해머를 사용하여 너트를 깨뜨리는 느낌이 든다면 프로토 타입의 템플릿 시스템을 사용할 수 있습니다 .

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