연결 없이 자바스크립트에서 변수를 문자열로 보간하려면 어떻게 해야 합니까?

연결 없이 자바스크립트에서 변수를 문자열로 보간하려면 어떻게 해야 합니까?

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.

얼마나 깔끔한가요?

보너스:

또한 이스케이프 없이 javascript에서 여러 줄의 문자열을 사용할 수 있으므로 템플릿에 매우 적합합니다.

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;

Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge 이전 버전에는 없습니다.sprintf for JavaScript를 사용하여 중간까지 이동할 수 있습니다.

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

할 수는 있지만, 특히 일반적이지 않습니다.

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

만약 당신이 정말로 필요하다면, 당신은 이것을 지능적으로 하는 함수를 쉽게 쓸 수 있다.

<ES6:>에 대한 답변이 완료되어 즉시 사용할 수 있습니다.

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

> ES6 의 경우는, 다음의 조작도 가능합니다.

let first = 'Neo'; 
`My firstname is ${first}`; 

이 javascript 기능을 사용하여 이런 종류의 템플릿을 만들 수 있습니다.라이브러리 전체를 포함할 필요는 없습니다.

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는 사실 javascript이지만 훨씬 더 나은 구문을 가지고 있습니다.

CoffeeScript 의 개요에 대해서는, 이 초보자 가이드를 참조해 주세요.

나는 백 체크 "를 사용할 것이다.

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

하지만 당신이 모른다면name1작성할 때msg1.

예를 들어 다음과 같은 경우msg1API에서 가져온 것입니다.

다음을 사용할 수 있습니다.

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}그의 가치로.

저는 이 npm 패키지 스트링을 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" 

만약 당신이 마이크로템플릿을 위해 보간을 하려고 한다면, 나는 그 목적을 위해 Beauthard.js를 좋아합니다.

여기에 되지 않지만에는 Lodash가 있습니다._.template() ,

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

체크할 경우에는 든지 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!'

커스텀 딜리미터가 가장 흥미로웠습니다.

사용방법:

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

Uso

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

하다와 비슷한 을 만들어 .String.format()

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 hello = "foo";

var my_string ="I pity the";

console.log(my_string, hello)

언급URL : https://stackoverflow.com/questions/3304014/how-to-interpolate-variables-in-strings-in-javascript-without-concatenation