总结前端EL表达式，模板字符串等
总结前端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方法
EL表达式允许用户开发自定义EL函数，以在JSP页面中通过EL表达式调用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
