Làm cách nào để nội suy các biến trong chuỗi trong JavaScript mà không cần ghép nối?

Question

Tôi biết trong PHP chúng ta có thể làm điều gì đó như thế này:

$hello = "foo"; 
$my_string = "I pity the $hello"; 

Output: "I pity the foo"

Tôi đã tự hỏi nếu điều này tương tự có thể trong JavaScript là tốt. Sử dụng các biến bên trong các chuỗi mà không sử dụng nối - nó trông ngắn gọn và thanh lịch hơn để viết.

Answer 1

Bắt đầu từ Firefox 34/Chrome 41/Safari 9/Microsoft Edge bạn có thể sử dụng một ES2015/tính năng ES6 gọi Template Literals và sử dụng cú pháp sau:

`String text ${expression}` 

Các văn bản mẫu được đính kèm bởi dấu kiểm ngược (``) (dấu trọng âm) thay vì dấu nháy kép hoặc đơn.

Ví dụ:

var a = 5; 
var b = 10; 
console.log(`Fifteen is ${a + b}.`); 
// "Fifteen is 15. 

Làm thế nào gọn gàng là điều đó không?

Bonus:

Nó cũng cho phép cho các chuỗi đa dòng trong javascript mà không thoát, đó là rất tốt cho các mẫu:

return ` 
    <div class="${foo}"> 
     ... 
    </div> 
`; 

Browser support:

Là cú pháp này là không được hỗ trợ bởi các trình duyệt cũ hơn (Internet Explorer và Safari < = 8), bạn có thể muốn sử dụng Babel để chuyển mã của bạn thành ES5 để đảm bảo mã sẽ chạy ở mọi nơi.

---

Side lưu ý:

Bắt đầu từ IE8 + bạn có thể sử dụng chuỗi cơ bản định dạng bên console.log:

console.log('%s is %d.', 'Fifteen', 15); 
// Fifteen is 15. 

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, không, điều đó là không thể trong javascript. Bạn sẽ phải nghỉ đến:

var hello = "foo"; 
var my_string = "I pity the " + hello; 

Answer 3

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge, no. Mặc dù bạn có thể thử sprintf for JavaScript để có được nửa đường:

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

Answer 4

Nếu bạn đang cố gắng làm suy cho microtemplating, tôi thích Mustache.js cho mục đích đó.

Answer 5

tốt bạn có thể làm điều này, nhưng nó không phải là đặc biệt nói chung

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

Bạn có thể dễ dàng viết một hàm thực hiện điều này một cách thông minh nếu bạn thực sự cần thiết để

Answer 6

Nếu bạn muốn viết CoffeeScript bạn có thể làm:

hello = "foo" 
my_string = "I pity the #{hello}" 

CoffeeScript thực sự là IS javasc ript, nhưng với cú pháp tốt hơn nhiều.

Để biết tổng quan về CoffeeScript, hãy kiểm tra số beginner's guide này.

Answer 7

Bạn có thể sử dụng chức năng javascript này để thực hiện loại khuôn mẫu này. Không cần bao gồm toàn bộ thư viện.

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

Output: "I would like to receive email updates from this store FOO BAR BAZ."

Sử dụng một chức năng như một cuộc tranh cãi với string.Replace() chức năng là một phần của ECMAScript v3 spec. Xem this SO answer để biết thêm chi tiết.

Answer 8

Hoàn thành câu trả lời, sẵn sàng để được sử dụng:

var Strings = { 
     create : (function() { 
       var regexp = /{([^{]+)}/g; 

       return function(str, o) { 
        return str.replace(regexp, function(ignore, key){ 
          return (key = o[key]) == null ? '' : key; 
        }); 
       } 
     })() 
}; 

Gọi như

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'}); 

Để gắn nó vào String.prototype:

String.prototype.create = function(o) { 
      return Strings.create(this, o); 
} 

Sau đó sử dụng như:

"My firstname is ${first}".create({first:'Neo'}); 

Answer 9

tôi đã viết gói NPM này stringinject https://www.npmjs.com/package/stringinject cho phép bạn làm như sau

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

sẽ thay thế {0} và {1} với các mục mảng và trả về chuỗi sau

"this is a test string for stringInject" 

hoặc bạn có thể thay thế placeholders với các phím đối tượng và giá trị như vậy:

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

"My username is tjcafferkey on Github" 

Answer 10

Vâng, bạn có thể sử dụng this is ${variable} hoặc bạn có thể sử dụng "this is "+variable Cả hai đều hoạt động tốt.

Cũng nên nhớ để sử dụng Tilda (``) chính xung quanh this is ${variable} thay vì "hay"