이 코드를 고려하십시오.

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

ES6을 사용하여 쉽게 수행 할 수 있으며 template stringbabel과 같은 사용 가능한 transpilar를 사용하여 ES5로 변환 할 수 있습니다.

const age = 3;

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

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

문자열 보간을위한 간단한 JavaScript 모듈 인 kiwi를 사용해보십시오 .

넌 할 수있어

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

또는

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

console.log출력에서 보간하려는 경우

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

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

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

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>

Greg Kindel의 두 번째 답변을 확장 하여 상용구를 제거하는 함수를 작성할 수 있습니다.

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

나는 당신에게 예를 보여줄 수 있습니다 :

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

ES6부터 객체 키에서 문자열 보간 SyntaxError: expected property name, got '${'을 수행하려면 다음과 같은 작업을 수행하면

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

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

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

@Chris Nielsen의 포스트의 ES6 버전을 위해 더 많은 것을 대체하십시오 .

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."

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

PHP는 매우 간단한 표기법을 사용하여 변수와 일부 표현식을 포함하는 따옴표 붙은 문자열을 확장합니다. $a="the color is $color";

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

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

마지막으로, sprintf (C, C ++ 및 PHP에서와 같이)는 JavaScript로 작성 될 수 있지만 다른 솔루션보다 약간 덜 효율적이라고 생각합니다.

사용자 정의 유연한 보간 :

var sourceElm = document.querySelector('input')

// interpolation callback
const onInterpolate = s => `<mark>${s}</mark>`

// listen to "input" event
sourceElm.addEventListener('input', parseInput) 

// parse on window load
parseInput() 

// input element parser
function parseInput(){
  var html = interpolate(sourceElm.value, undefined, onInterpolate)
  sourceElm.nextElementSibling.innerHTML = html;
}

// the actual interpolation 
function interpolate(str, interpolator = ["{{", "}}"], cb){
  // split by "start" pattern
  return str.split(interpolator[0]).map((s1, i) => {
    // first item can be safely ignored
	  if( i == 0 ) return s1;
    // for each splited part, split again by "end" pattern 
    const s2 = s1.split(interpolator[1]);

    // is there's no "closing" match to this part, rebuild it
    if( s1 == s2[0]) return interpolator[0] + s2[0]
    // if this split's result as multiple items' array, it means the first item is between the patterns
    if( s2.length > 1 ){
        s2[0] = s2[0] 
          ? cb(s2[0]) // replace the array item with whatever
          : interpolator.join('') // nothing was between the interpolation pattern
    }

    return s2.join('') // merge splited array (part2)
  }).join('') // merge everything 
}

input{ 
  padding:5px; 
  width: 100%; 
  box-sizing: border-box;
  margin-bottom: 20px;
}

*{
  font: 14px Arial;
  padding:5px;
}

<input value="Everything between {{}} is {{processed}}" />
<div></div>

설명하는 경우 템플릿이 가장 적합 할 수 있지만 반복 가능한 / 배열 형식의 데이터 및 / 또는 인수가 있거나 필요한 경우을 사용할 수 있습니다 String.raw.

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

데이터를 배열로 사용하면 스프레드 연산자를 사용할 수 있습니다.

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

내가 찾던 것을 찾을 수 없었습니다.

Node.js를 사용하는 경우 다음 util과 같이 작동하는 형식 함수가 있는 내장 패키지가 있습니다.

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

우연히 이것은 이제 console.logNode.js에서도 맛에 내장됩니다.

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError