js \n\r 换行失败 ：【white-space: pre-line;】${} Template Literals

问题：

js 文字换行失败

confirm_dialog({
    title   : '確認', 
    message : '以下XXを行います。\n\r \n \r <br>'+ ' ID：'+ row.id,
    yes_cb  : function(){
        update(row);
    },
    no_cb   : null,
});

复制

実施結果：/n ⇒空格， 作为字符串直接打印出来了

確認
以下XXを行います。    <br> ID：123

复制

方案：

１，\n\r 有効：white-space: pre-line;

２， 有効：&{}

1，CSS様式：white-space: pre-line;

css定义追加

.pre-line{
    white-space: pre-line;
}

复制

confirm_dialog message定义部分：追加 class

<p class='pre-line'>{{message}}</p>

复制

2，使用 Template Literals（テンプレートリテラル）${}

<p>${context.message}</p>

复制

Template Literals：拼接字符串，包括变量，表达式，html templete

---

Interpolation 插值

Template literals provide an easy way to interpolate variables and expressions into strings.

The method is called string interpolation.

Template Literals is an ES6 feature (JavaScript 2015).It is supported in all modern browsers.

The syntax is:

${...}

复制

例：

// Variable Substitutions 变量置换
let firstName = "John";
let text = `Welcome ${firstName}, ${lastName}!`;
let text = `He's often called "Johnny"`;     //Back-Tics Syntax, Quotes Inside Strings
let text =                                   //Multiline Strings
`multiline
Strings`;

// Expression Substitution 表达式
let total = `Total: ${(price * (1 + rate)).toFixed(2)}`;

// HTML Templates
let html = `<h2>${header}</h2>`;

复制

补充：

handlebars newline

templete literal