[javascript] 연결하지 않고 JavaScript에서 문자열의 변수를 보간하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

PHP에서 다음과 같이 할 수 있다는 것을 알고 있습니다.

$hello = "foo";
$my_string = "I pity the $hello";

산출: "I pity the foo"

JavaScript에서도 이와 동일한 것이 가능한지 궁금합니다. 연결을 사용하지 않고 문자열 내부에서 변수 사용-작성하기가 더 간결하고 우아해 보입니다.

답변

템플릿 리터럴 을 활용하고 다음 구문을 사용할 수 있습니다 .

`String text ${expression}`

템플릿 리터럴은 큰 따옴표 나 작은 따옴표 대신 백틱 (“) (가중 악센트)으로 묶습니다.

이 기능은 ES2015 (ES6)에서 도입되었습니다.

예

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

얼마나 깔끔한가요?

보너스:

또한 이스케이프 처리하지 않고 자바 스크립트에서 여러 줄 문자열을 허용하므로 템플릿에 적합합니다.

return `
    <div class="${foo}">
         ...
    </div>
`;

브라우저 지원 :

이 구문은 이전 브라우저 (대부분 Internet Explorer)에서 지원되지 않으므로 Babel / Webpack을 사용하여 코드를 ES5로 변환하여 어디서나 실행될 수 있습니다.

사이드 노트 :

IE8 +부터는 기본 문자열 형식을 사용할 수 있습니다 console.log.

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.

답변

Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge 이전에는 Javascript에서 불가능했습니다. 다음에 의지해야합니다.

var hello = "foo";
var my_string = "I pity the " + hello;

답변

이전에 파이어 폭스 (34) / 크롬 (41) / 사파리 9 / 마이크로 소프트 에지, 아니. JavaScript 를 위해 sprintf를 사용해보십시오 .

var hello = "foo";
var my_string = sprintf("I pity the %s", hello);

답변

글쎄, 당신은 이것을 할 수 있지만, 일반적이지 않습니다.

'I pity the $fool'.replace('$fool', 'fool')

실제로 필요한 경우 지능적으로 수행하는 함수를 쉽게 작성할 수 있습니다.

답변

완전한 답변, 즉시 사용 가능 : 

 var Strings = {
        create : (function() {
                var regexp = /{([^{]+)}/g;

                return function(str, o) {
                     return str.replace(regexp, function(ignore, key){
                           return (key = o[key]) == null ? '' : key;
                     });
                }
        })()
};

전화 

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'});

String.prototype에 첨부하려면 : 

String.prototype.create = function(o) {
           return Strings.create(this, o);
}

그런 다음 다음과 같이 사용하십시오. 

"My firstname is ${first}".create({first:'Neo'});

답변

이 자바 스크립트 함수를 사용하여 이러한 종류의 템플릿을 수행 할 수 있습니다. 전체 라이브러리를 포함 할 필요가 없습니다.

function createStringFromTemplate(template, variables) {
    return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){
        return variables[varName];
    });
}

createStringFromTemplate(
    "I would like to receive email updates from {list_name} {var1} {var2} {var3}.",
    {
        list_name : "this store",
        var1      : "FOO",
        var2      : "BAR",
        var3      : "BAZ"
    }
);

출력 :"I would like to receive email updates from this store FOO BAR BAZ."

함수를 String.replace () 함수의 인수로 사용하는 것은 ECMAScript v3 스펙의 일부였습니다. 자세한 내용은 이 SO 답변 을 참조하십시오.

답변

CoffeeScript를 작성하려면 다음을 수행하십시오.

hello = "foo"
my_string = "I pity the #{hello}"

CoffeeScript는 실제로 자바 스크립트이지만 훨씬 더 좋은 구문을 사용합니다.

CoffeeScript에 대한 개요는이 초보자 안내서를 확인하십시오 .