พิจารณารหัสนี้:

var age = 3;

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

มีวิธีอื่นในการแทรกค่าของตัวแปรในสตริงนอกเหนือจากการต่อข้อมูลสตริงหรือไม่?

ตั้งแต่ ES6 คุณสามารถใช้เทมเพลตตัวอักษร :

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

PSหมายเหตุการใช้ backticks ``นี้:

TL; DR

ใช้ตัวอักษรสตริงของเทมเพลต ECMAScript 2015 หากมี

คำอธิบาย

ไม่มีวิธีโดยตรงที่จะทำตามข้อกำหนด ECMAScript 5 แต่ ECMAScript 6 มีสตริงเท็มเพลตซึ่งรู้จักกันในชื่อquasi-literalsระหว่างการร่างข้อมูลจำเพาะ ใช้พวกเขาเช่นนี้

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

คุณสามารถใช้การแสดงออก JavaScript ถูกต้องใด ๆ {}ภายใน ตัวอย่างเช่น:

> `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 และอยากรู้เกี่ยวกับสิ่งนี้ในตอนนี้ , เตียงทดสอบนี้สามารถนำมาใช้ในการเล่นรอบจนทุกคนได้รับการสนับสนุนสำหรับการนี้

JavaScript Remedialของ Douglas Crockford มี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' }));

หากคุณไม่ต้องการเปลี่ยนต้นแบบของสตริงคุณสามารถปรับให้เป็นแบบสแตนด์อโลนหรือวางไว้ในเนมสเปซอื่นหรืออะไรก็ตาม

คำเตือน: หลีกเลี่ยงระบบเทมเพลตใด ๆ ที่ไม่อนุญาตให้คุณหลีกเลี่ยงตัวคั่น ตัวอย่างเช่นจะไม่มีวิธีการแสดงผลต่อไปนี้โดยใช้supplant()วิธีการที่กล่าวถึงที่นี่

"ฉันอายุ 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 stringและ transpile เป็น ES5 โดยใช้ transpilar ที่มีอยู่เช่น babel

const age = 3;

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

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

ลองกีวีซึ่งเป็นโมดูล JavaScript ที่มีน้ำหนักเบาสำหรับการแก้ไขสตริง

คุณทำได้

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 หากคุณต้องการทำการสอดแทรกสตริงในคีย์วัตถุคุณจะได้รับ a 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);โดยใช้อาร์กิวเมนต์จำนวนตัวแปร ในขณะที่ไม่มีข้อได้เปรียบเหนือการต่อข้อมูลในตัวอย่างนี้เมื่อนิพจน์ยาวกว่าไวยากรณ์นี้อาจชัดเจนขึ้น หรือสามารถใช้เครื่องหมายดอลลาร์เพื่อส่งสัญญาณการเริ่มต้นของนิพจน์โดยใช้ฟังก์ชัน JavaScript เช่นเดียวกับใน PHP

ในทางกลับกันการเขียนฟังก์ชั่นการแก้ปัญหาที่มีประสิทธิภาพเพื่อให้การขยายตัวเหมือนแม่แบบของสตริงสำหรับเบราว์เซอร์รุ่นเก่าจะไม่ยาก อาจมีคนทำไปแล้ว

ในที่สุดฉันคิดว่า 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>

ในขณะที่แม่แบบที่น่าจะดีที่สุดสำหรับกรณีที่คุณอธิบายถ้าคุณมีหรือต้องการให้ข้อมูลและ / หรือข้อโต้แย้งของคุณในรูปแบบ iterable / 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.logรสชาติด้วยใน Node.js -

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