JavaScript如何将获取无后缀文件名函数的返回值与字符串拼接

问题原因 #

• 直接拼接onLoad函数名本质是将函数对象转为字符串，所以会输出完整函数代码，而非函数执行结果
• onLoad是window.load事件的异步回调，页面加载完成前该函数不会执行，全局同步执行拼接逻辑时，函数还未运行，无法拿到返回值
• forEach循环内的return仅会终止当前次循环，不会作为外层onLoad函数的返回值生效
• 直接使用replace('.js', '')的替换逻辑不严谨，若文件名本身包含.js字符会出现误替换

修正方案 #

你可以把获取脚本文件名的逻辑抽为独立函数，所有依赖该结果的逻辑都放在load事件回调中执行：

"use strict";
window.addEventListener('load', onLoad, false);

// 提取获取所有脚本不带后缀文件名的逻辑
function getScriptFilenames() {
  const filenames = [];
  const scripts = document.querySelectorAll('script');
  scripts.forEach(scr => {
    if (scr.src) {
      const slashPos = scr.src.lastIndexOf('/');
      let filename = scr.src.slice(slashPos + 1);
      // 仅替换末尾的.js后缀
      filename = filename.replace(/\.js$/, '');
      filenames.push(filename);
    }
  });
  return filenames;
}

function onLoad(evt) {
  const filenames = getScriptFilenames();
  // 仅需要单个文件名时直接取filenames[0]即可
  const string = 'Date = ' + filenames.join(',');
  console.log(string);
  // 其他需要使用该字符串的逻辑都写在该回调范围内即可
}

如果你的需求是获取当前运行的脚本本身的文件名，不需要等待window.load事件，直接用document.currentScript即可实现更简单的逻辑：

const currentScript = document.currentScript;
let filename = currentScript.src.slice(currentScript.src.lastIndexOf('/') + 1).replace(/\.js$/, '');
const string = 'Date = ' + filename;
console.log(string);

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