cách đẹp hơn để tùy chọn bao gồm String trong ES6 Chuỗi mẫu

Question

Tôi muốn hiển thị chào tên nếu một điều kiện isLoggedIn là đúng, và chỉ chào khác.

Tôi đang sử dụng mẫu chuỗi ES6 để cố gắng làm cho cú pháp đẹp hơn so với nối chuỗi cũ đồng bằng. Tuy nhiên, cách tốt nhất mà tôi đã tìm thấy để làm điều đó như sau (es6fiddle)

`hello ${mockIsLoggedIn(false) ? username : ''}` 

Nó vẫn không cú pháp rất tốt đẹp, đặc biệt là trong các mẫu còn nơi có nhiều hơn một biến Tôi muốn làm điều này với.

Tôi đã cố tìm một cú pháp bao gồm các chuỗi tùy chọn thành các mẫu, dựa trên điều kiện, nhưng tôi không nghĩ có một. Một cái gì đó như thế này sẽ đẹp hơn:

`hello ${condition && username}` 

Nhưng, nó ám sai vào String nếu điều kiện là sai.

Tôi cũng đã cố gắng nướng truthiness của username vào biến chính nó, ví dụ: có username được undefined hoặc null nếu nó không tồn tại - tuy nhiên chuỗi mẫu sau đó chỉ cần làm cho không xác định hoặc rỗng.

Bất kỳ ai có thể đề xuất cú pháp hay phương pháp tiếp cận tốt hơn hay là phương pháp đầu tiên tốt nhất tôi sẽ làm với mẫu Chuỗi?

Answer 1

Bạn có thể sử dụng condition && value || "", nhưng điều đó thật khủng khiếp như toán tử bậc ba.

Tôi đoán đặt cược tốt nhất của bạn là sử dụng một mẫu được gắn thẻ ở đây là loại bỏ các giá trị rỗng:

function nonEmpty(parts) { 
    var res = parts[0]; 
    for (var i=1; i<parts.length; i++) { 
     if (arguments[i]) // you might want to handle `0` different 
      res += arguments[i]; 
     res += parts[i]; 
    } 
    return res; 
} 

console.log(nonEmpty`hello ${mockIsLoggedIn(false) && username}`); 

Answer 2

Coming lại vấn đề này sau một thời gian, tôi nghĩ rằng mô hình đẹp hơn như ám chỉ trong những nhận xét và trả lời khác thực sự là hoàn toàn tách biệt logic của việc giải quyết biến từ mẫu.

Điều đó cho phép bạn nhận cú pháp mong muốn.

const username = isLoggedIn ? getUsername(): ''; 
const display = `hello${username && ' ' + username}` 

Hoặc, đơn giản hơn, nhưng conflating khoảng cách/layout của mẫu với biến một chút ..

const username = isLoggedIn ? ' ' + getUsername() : ''; 
const display = `hello${username}` 

Đó không phải là một lớp lót, nhưng thực tế trong nhiều trường hợp đó là có khả năng là một điêu tôt.