總結前端EL表示式，模板字串等

一、EL表示式

1.簡介

EL 全名為Expression Language。EL主要作用：
　　1、獲取資料
　　　　EL表示式主要用於替換JSP頁面中的指令碼表示式，以從各種型別的web域 中檢索java物件、獲取資料。(某個web域 中的物件，訪問javabean的屬性、訪問list集合、訪問map集合、訪問陣列)
　　2、執行運算
　　　　利用EL表示式可以在JSP頁面中執行一些基本的關係運算、邏輯運算和算術運算，以在JSP頁面中完成一些簡單的邏輯運算。${user==null}
　　3、獲取web開發常用物件
　　　　EL 表示式定義了一些隱式物件，利用這些隱式物件，web開發人員可以很輕鬆獲得對web常用物件的引用，從而獲得這些物件中的資料。
　　4、呼叫Java方法

1.1、獲取資料

　　使用EL表示式獲取資料語法："${識別符號}"

1.2、執行運算

　　語法：${運算表示式}，EL表示式支援如下運算子：

1、關係運算符

2、邏輯運算子：

　　3、empty運算子：檢查物件是否為null(空)

　　4、二元表示式：${user!=null?user.name :""}
　　5、[ ] 和 . 號運算子

1.3、獲得web開發常用物件

　　EL表示式語言中定義了11個隱含物件，使用這些隱含物件可以很方便地獲取web開發中的一些常見物件，並讀取這些物件的資料。
　　語法：${隱式物件名稱}

1.4、使用EL呼叫Java方法

　　EL表示式語法允許開發人員開發自定義函式，以呼叫Java類的方法。語法：${prefix：method(params)}
　　在EL表示式中呼叫的只能是Java類的靜態方法，這個Java類的靜態方法需要在TLD檔案中描述，才可以被EL表示式呼叫。
　　EL自定義函式用於擴充套件EL表示式的功能，可以讓EL表示式完成普通Java程式程式碼所能完成的功能。

1.5、EL Function開發步驟

　　一般來說， EL自定義函式開發與應用包括以下三個步驟：
　　1、編寫一個Java類的靜態方法
　　2、編寫標籤庫描述符（tld）檔案，在tld檔案中描述自定義函式。
　　3、在JSP頁面中匯入和使用自定義函式

更多見下方連結

注：詳細見https://www.cnblogs.com/xdp-gacl/p/3938361.html

二、模板字串

1.描述

模板字串使用反引號 (``) 來代替普通字串中的用雙引號和單引號。

1.1 多行字串

在新行中插入的任何字元都是模板字串中的一部分，使用普通字串，你可以通過以下的方式獲得多行字串：

console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

要獲得同樣效果的多行字串，只需使用如下程式碼：

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

2.2 插入表示式

在普通字串中嵌入表示式，必須使用如下語法：

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

現在通過模板字串，我們可以使用一種更優雅的方式來表示：

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

簡單應用場景舉例

<div id='container'></div>

<script>
  var container = document.querySelector('#container')
  var count = 2
  // 拼接變數
  var inner = '這裡有' + count + '個炒粉工'
  container.innerText = inner
  // 換行
  var _inner = '這裡有<b>' + count + '</b>個炒粉工,' + 
               '每天只知道吹水~'
  container.innerHTML = _inner
  // 雙單巢狀(我找不到一個很典型的栗子，隨便捏了一個)
  var $inner = '這裡有' + count + '"(two)"個炒粉工'
  // 雙套雙單套單
  var $$inner = '這裡\'there\'balabal' 
      $$$inner = "這裡\"there\"balabal"
</script>

用模板字串可以這樣寫

// 拼接變數
var inner = `這裡有${count}個炒粉工`
// 換行
var _inner = `
                這裡有<b>${count}</b>個炒粉工
                每天只知道吹水
             `
// 因為模版字串外部為反引號，所以單雙巢狀的場景還是比較少，如果在內部的字串出現了單雙巢狀規則還是和原來一致的。
// javascript template(百度埋點是比較常見的一個了)
var doc = document.body, 
    hmc = document.createElement('script');
hmc.innerHTML = `
                  var _hmt = _hmt || [];        
                  (function() {           
                    var hm = document.createElement("script");          hm.src = "https://hm.baidu.com/hm.js";           
                    var s = document.getElementsByTagName("script")[0];     s.parentNode.insertBefore(hm, s);
                    })();       
                  `;
doc.appendChild(hmc);
// 巢狀反引號需要轉義
var $r = `這裡有\`${count}\`個炒粉工`
// 表示式
`${count} + ${count} = ${count * 2}` // 2 + 2 = 4
// 執行方法（預設會呼叫toString）
const $function = function(count) { return `這裡有${count}個炒粉工` }
`其實, ${$function(count)}` // 其實，這裡有2個炒粉工
// 模版字串中呼叫模版字串
var $$r = `你確定這裡是${count > 0 ? `${count}個炒粉工` : '水軍'}`

* 簡單用法

alert`123`
// 等同於
alert('123')

• 模版字串中存在一個或多個變數(也可稱為引數)

const fnc = (val1, val2, val3, val4) => { console.log(val1, val2, val3, val4) } 
var $a = 2, $b = 3, $c = 4
fnc`這裡有${$a}個,${$b}個${$c}個`
// 控制檯輸出
["這裡有", "個,", "個", "個"] 2 3 4

更多見下方連結

注：詳細見https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals