연결하지 않고 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에 대한 개요는이 초보자 안내서를 확인하십시오 .

마이크로 템플릿을 위해 보간을하려고한다면 Mustache.js 를 좋아 합니다.

이 npm 패키지 stringinject https://www.npmjs.com/package/stringinject 를 작성 하여 다음을 수행 할 수 있습니다.

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);

{0} 및 {1}을 배열 항목으로 바꾸고 다음 문자열을 리턴합니다.

"this is a test string for stringInject"

또는 다음과 같이 자리 표시자를 개체 키 및 값으로 바꿀 수 있습니다.

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

"My username is tjcafferkey on Github" 

나는``틱 ''을 사용합니다.

let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'

하지만 name1언제 만들지 모른다 면 msg1.

예를 msg1들어 API에서 온 경우 .

당신이 사용할 수있는 :

let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'

const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
    return eval(key);
});
console.log(result); // 'Hello Geoffrey'

그것은 ${name2}그의 가치로 대체 될 것 입니다.

외부 라이브러리는 여기에 언급,하지만 Lodash는이 표시되지 않는 _.template(),

https://lodash.com/docs/4.17.10#template

이미 라이브러리를 사용하고 있다면 체크 아웃 할 가치가 있으며 Lodash를 사용하지 않는 경우 항상 npm에서 메소드를 선택 npm install lodash.template하여 오버 헤드를 줄일 수 있습니다.

가장 간단한 형태-

var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

많은 구성 옵션이 있습니다-

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'

맞춤 구분 기호가 가장 흥미로 웠습니다.

String.format()Java 와 유사한 메소드 작성

StringJoin=(s, r=[])=>{
  r.map((v,i)=>{
    s = s.replace('%'+(i+1),v)
  })
return s
}

사용하다

console.log(StringJoin('I can %1 a %2',['create','method'])) //output: 'I can create a method'

2020 년의 평화 인용문 :

Console.WriteLine("I {0} JavaScript!", ">:D<");

console.log(`I ${'>:D<'} C#`)

간단히 사용하십시오 :

var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)

String.prototype.interpole = function () {
    var c=0, txt=this;
    while (txt.search(/{var}/g) > 0){
        txt = txt.replace(/{var}/, arguments[c]);
        c++;
    }
    return txt;
}

우소 :

var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"

var hello = "foo";

var my_string ="I pity the";

console.log (my_string, 안녕하세요)