Oracle APEX中JavaScript模板字面量URL变量插值异常问题

问题场景 #

在Oracle APEX中使用JavaScript模板字面量构建图片URL时，硬编码IMAGE_ID=1745能正常生成有效URL，但使用${imageId}变量插值时，变量名被转义为%24%7BimageId%7D，无法替换为实际值。当前基于d3.OrgChart构建组织架构图，需要将图片src中的IMAGE_ID动态替换为d.data.id。

相关代码示例 #

1. 硬编码可正常运行的代码 #

const test = `url("f?p=&APP_ID.:1:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:1745")`;
console.log(test);

2. 使用变量后异常的代码 #

const imageId = 1745;
const test = `url("f?p=&APP_ID.:1:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:${imageId}")`;
console.log(test);

输出URL中IMAGE_ID值为%24%7BimageId%7D，未完成变量插值。

3. AJAX应用进程代码 #

DECLARE
  l_lob     BFILE;
  v_pic     blob;
  l_length  NUMBER;
BEGIN
select picture into v_pic from pjpayroll.hremp WHERE pkcode = :IMAGE_ID ;

  l_length := DBMS_LOB.getlength(v_pic);
  htp.flush;
  htp.init;
  htp.p('Content-length: ' || l_length);
  htp.p('Content-Disposition: inline; filename="&REQUEST."');
  owa_util.http_header_close;
  wpg_docload.download_file(v_pic);
EXCEPTION WHEN OTHERS THEN NULL;
END;

原因分析 #

Oracle APEX的页面渲染机制会优先解析&APP_ID.这类服务器端替换变量，同时会对页面中的特殊字符（包括模板字面量的${}语法）进行HTML转义，导致客户端JavaScript的模板字面量插值逻辑被破坏，变量名被转义为URL编码后的字符串，无法正常替换为实际值。

解决方法 #

方法1：先提取APEX变量到JS，再构建URL #

先将APEX的服务器端变量提前赋值给JavaScript变量，避免模板字面量与APEX解析逻辑冲突：

// 先将APEX变量存入JS变量
const appId = '&APP_ID.';
const appSession = '&APP_SESSION.';

// 在d3.OrgChart的nodeContent中动态生成图片URL
nodeContent: function(d) {
  const imageId = d.data.id;
  // 使用模板字面量构建（此时APEX已完成服务器端解析，不会干扰JS插值）
  const imgSrc = `f?p=${appId}:1:${appSession}:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:${imageId}`;
  return `<div><img src="${imgSrc}" alt="员工头像" /><div>${d.data.name}</div></div>`;
}

方法2：使用字符串拼接替代模板字面量 #

如果担心APEX解析干扰，直接用字符串拼接更稳妥：

nodeContent: function(d) {
  const appId = '&APP_ID.';
  const appSession = '&APP_SESSION.';
  const imageId = d.data.id;
  const imgSrc = 'f?p=' + appId + ':1:' + appSession + ':APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:' + imageId;
  return '<div><img src="' + imgSrc + '" alt="员工头像" /><div>' + d.data.name + '</div></div>';
}

方法3：将JS代码放入静态文件 #

将涉及模板字面量的JavaScript代码上传为APEX静态文件，静态文件不会经过APEX的服务器端解析，模板字面量语法可正常生效。

内容的提问来源于stack exchange，提问作者Shahroz Ahmed