Xem xét mã này:

var age = 3;

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

Có cách nào khác để chèn giá trị của biến vào chuỗi không, ngoài nối chuỗi?

Kể từ ES6, bạn có thể sử dụng mẫu chữ :

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

PS Lưu ý việc sử dụng backticks : ``.

tl; dr

Sử dụng chuỗi ký tự mẫu của ECMAScript 2015, nếu có.

Giải trình

Không có cách nào trực tiếp để làm điều đó, theo thông số kỹ thuật của ECMAScript 5, nhưng ECMAScript 6 có các chuỗi mẫu , còn được gọi là gần như bằng chữ trong quá trình soạn thảo thông số kỹ thuật. Sử dụng chúng như thế này:

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

Bạn có thể sử dụng bất kỳ biểu thức JavaScript hợp lệ nào bên trong {}. Ví dụ:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

Điều quan trọng khác là, bạn không phải lo lắng về chuỗi nhiều dòng nữa. Bạn có thể viết chúng đơn giản như

> `foo
...     bar`
'foo\n    bar'

Lưu ý: Tôi đã sử dụng io.js v2.4.0 để đánh giá tất cả các chuỗi mẫu được hiển thị ở trên. Bạn cũng có thể sử dụng Chrome mới nhất để kiểm tra các ví dụ được hiển thị ở trên.

Lưu ý: Thông số kỹ thuật ES6 hiện đã được hoàn thiện , nhưng vẫn chưa được triển khai bởi tất cả các trình duyệt chính.
Theo các trang Mạng của Nhà phát triển Mozilla , việc này sẽ được triển khai để hỗ trợ cơ bản bắt đầu ở các phiên bản sau: Firefox 34, Chrome 41, Internet Explorer 12. Nếu bạn là người dùng Opera, Safari hoặc Internet Explorer và hiện đang tò mò về điều này , giường thử nghiệm này có thể được sử dụng để chơi xung quanh cho đến khi mọi người nhận được hỗ trợ cho việc này.

JavaScript Remedial của Douglas Crockford bao gồm một String.prototype.supplantchức năng. Nó ngắn, quen thuộc và dễ sử dụng:

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

Nếu bạn không muốn thay đổi nguyên mẫu của String, bạn luôn có thể điều chỉnh nó thành độc lập hoặc đặt nó vào một số không gian tên khác hoặc bất cứ thứ gì.

Lưu ý: tránh mọi hệ thống mẫu không cho phép bạn thoát khỏi các dấu phân cách của chính nó. Ví dụ, sẽ không có cách nào để xuất ra sau đây bằng supplant()phương pháp được đề cập ở đây.

"Tôi 3 tuổi nhờ vào biến {age} của tôi."

Nội suy đơn giản có thể hoạt động cho các tập lệnh nhỏ khép kín, nhưng thường đi kèm với lỗ hổng thiết kế này sẽ hạn chế bất kỳ việc sử dụng nghiêm trọng nào. Tôi thực sự thích các mẫu DOM, chẳng hạn như:

<div> I am <span id="age"></span> years old!</div>

Và sử dụng thao tác jQuery: $('#age').text(3)

Thay vào đó, nếu bạn chỉ đơn giản là mệt mỏi với việc nối chuỗi, luôn có cú pháp thay thế:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Hãy thử thư viện sprintf (một triển khai sprintf JavaScript mã nguồn mở hoàn chỉnh). Ví dụ:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

vsprintf lấy một mảng các đối số và trả về một chuỗi được định dạng.

Tôi sử dụng mô hình này trong nhiều ngôn ngữ khi tôi chưa biết cách thực hiện đúng và chỉ muốn nhanh chóng đưa ra ý tưởng:

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

Trong khi không đặc biệt hiệu quả, tôi thấy nó có thể đọc được. Nó luôn hoạt động và luôn có sẵn:

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

LUÔN LUÔN

* 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'

Bạn có thể sử dụng hệ thống mẫu của Prototype nếu bạn thực sự cảm thấy muốn sử dụng búa tạ để bẻ đai ốc:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

Bạn có thể dễ dàng sử dụng ES6 template stringvà dịch mã sang ES5 bằng bất kỳ giao dịch có sẵn nào như babel.

const age = 3;

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

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

Hãy thử kiwi , một mô-đun JavaScript trọng lượng nhẹ để nội suy chuỗi.

Bạn có thể làm

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

hoặc là

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

Nếu bạn muốn nội suy trong console.logđầu ra, thì chỉ cần

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

Đây %slà cái được gọi là "định dạng định dạng". console.logcó loại hỗ trợ nội suy tích hợp này.

Đây là một giải pháp yêu cầu bạn cung cấp một đối tượng với các giá trị. Nếu bạn không cung cấp một đối tượng làm tham số, nó sẽ mặc định sử dụng các biến toàn cục. Nhưng tốt hơn là sử dụng tham số, nó sạch hơn nhiều.

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>

Mở rộng câu trả lời thứ hai của Greg Kindel , bạn có thể viết một hàm để loại bỏ một số bản tóm tắt:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

Sử dụng:

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

Tôi có thể chỉ cho bạn một ví dụ:

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

Kể từ ES6, nếu bạn muốn thực hiện phép nội suy chuỗi trong các khóa đối tượng, bạn sẽ nhận được SyntaxError: expected property name, got '${'nếu bạn làm một cái gì đó như:

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

Bạn nên làm như sau thay thế:

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

Cung cấp thêm cho phiên bản ES6 của bài đăng của @Chris Nielsen.

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

Sử dụng cú pháp mẫu không thành công trong các trình duyệt cũ hơn, quan trọng nếu bạn đang tạo HTML để sử dụng công khai. Sử dụng phép nối rất tẻ nhạt và khó đọc, đặc biệt nếu bạn có nhiều biểu thức dài hoặc dài hoặc nếu bạn phải sử dụng dấu ngoặc đơn để xử lý hỗn hợp các mục số và chuỗi (cả hai đều sử dụng toán tử +).

PHP mở rộng các chuỗi được trích dẫn có chứa các biến và thậm chí một số biểu thức bằng cách sử dụng một ký hiệu rất nhỏ gọn: $a="the color is $color";

Trong JavaScript, một chức năng hiệu quả có thể được viết để hỗ trợ điều này: var a=S('the color is ',color); , sử dụng số lượng đối số biến. Mặc dù không có lợi thế hơn so với phép nối trong ví dụ này, khi các biểu thức trở nên dài hơn, cú pháp này có thể rõ ràng hơn. Hoặc người ta có thể sử dụng ký hiệu đô la để báo hiệu bắt đầu một biểu thức bằng hàm JavaScript, như trong PHP.

Mặt khác, viết một hàm giải pháp hiệu quả để cung cấp mở rộng chuỗi giống như mẫu cho các trình duyệt cũ hơn sẽ không khó. Ai đó có lẽ đã làm điều đó rồi.

Cuối cùng, tôi tưởng tượng rằng sprintf (như trong C, C ++ và PHP) có thể được viết bằng JavaScript, mặc dù nó sẽ kém hiệu quả hơn một chút so với các giải pháp khác này.

Nội suy tùy chỉnh linh hoạt:

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>

Mặc dù các mẫu có thể là tốt nhất cho trường hợp bạn mô tả, nếu bạn có hoặc muốn dữ liệu và / hoặc đối số của mình ở dạng lặp / mảng, bạn có thể sử dụng String.raw.

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

Với dữ liệu là một mảng, người ta có thể sử dụng toán tử trải rộng:

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

Không thể tìm thấy những gì tôi đang tìm kiếm, sau đó tìm thấy nó -

Nếu bạn đang sử dụng Node.js, có một utilgói tích hợp với chức năng định dạng hoạt động như thế này:

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

Thật trùng hợp, điều này giờ cũng được tích hợp vào các console.loghương vị trong Node.js -

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