在jsp中使用ES6反引号（`）来代替普通字符串中的用双引号和单引号，使用${expression}占位符与EL表达式有冲突的解决方法

本文链接：https://blog.youkuaiyun.com/qq_26464483/article/details/90695724

在使用ES6的反引号字符串模板时，与页面中的EL表达式${expression}出现冲突。可以尝试在内部嵌套一层`${}`并用双引号引起，或者将相关代码移至独立JS文件，或者禁用页面的EL表达式。同时，为避免参数混淆，建议在参数中添加单引号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ES6中使用反引号（`）拼接字符串很方便

let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

function addA(val, row, index) {
	//return '<a href="javascript:void(0)" οnclick="showOldJobInfo(' + index + ')">' + val + '</a>';
	return `<a href="javascript:void(0)" οnclick="showOldJobInfo(${index})">${val}</a>`;
}

可是在页面中同样使用EL表达式的时候就会出现${expression}占位符冲突的问题，浏览器执行取不到方法中的参数：浏览器运行程序

方法1

在内部再嵌套一层${}表达式并且用双引号引起：浏览器运行程序

方法2

将方法拿到一个单独的js文件中

function addA(val, row, index) {
	//return '<a href="javascript:void(0)" οnclick="showOldJobInfo(' + index + ')">' + val + '</a>';
	return `<a href="javascript:void(0)" οnclick="showOldJobInfo(${index})">${val}</a>`;
}

<script src="MyOwnTest.js"></script>

这样就就不会互相影响了！

方法3

如果整个页面不使用EL表达式可以在页面顶部加上

<%@ page isELIgnored="true" %>

这样页面就禁用了EL表达式。

在拼接字符串过程中传递参数最好加上单引号，这样多个参数就可以识别

function clickFlagStyle(value, row, index) {
	if (row.org_code.indexOf("AA")>=0) {
	    return `<a href="javascript:void(0)" οnclick="orgLoad('${row.org_id}', '${row.org_code}')">${value}</a>`
	} else {
	    return `<a href="javascript:void(0)" οnclick="deptLoad('${row.org_id}')">${value}</a>`
	}
}