JS如何用forEach配合substr去除文本读取的文件名数组.png后缀

1. myFunction 内部核心逻辑 #

你注释中写的 substr 逻辑本身是可用的，只需要补充空格处理、结果收集两步即可完成需求，完整逻辑如下：

function myFunction(rawFileName) {
  // 先去除字符串前后多余空格（解决txt用逗号+空格分隔后，每个元素带前导空格的问题）
  const trimmedName = rawFileName.trim();
  // 截取后缀前的内容，用lastIndexOf兼容文件名本身带多个点的场景
  const pureName = trimmedName.substr(0, trimmedName.lastIndexOf("."));
  // 这里可以按你的需求使用pureName，比如存入数组、打印、渲染到页面
  console.log(pureName);
  // 如果要收集所有结果可以提前声明一个数组，在这里push进去
  processedNames.push(pureName);
}

2. 实现优化建议 #

• 给所有变量加上let/const声明，你原代码中的pix、myPix没有声明，会默认变成全局变量，容易引发作用域污染问题
• 如果需要兼容文件名中带多个点的场景（比如test.v2.png），不要用indexOf('.')，改用lastIndexOf('.')取最后一个点的位置，避免错误截断文件名
• 除了substr之外，也可以用更简洁的方法去掉后缀：trimmedName.split('.').slice(0, -1).join('.')，不管后缀是什么、文件名有多少个点都能正确处理
• 遍历完成后如果需要把结果展示到页面，可以直接操作DOM，把收集到的纯文件名数组渲染到页面节点中

3. 完整修改后的JS代码 #

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      const pix = this.responseText;
      const myPix = pix.split(",");
      // 存储处理完成的纯文件名
      const processedNames = [];
      
      myPix.forEach(myFunction);
      
      function myFunction(rawFileName) {
        const trimmedName = rawFileName.trim();
        const pureName = trimmedName.substr(0, trimmedName.lastIndexOf("."));
        processedNames.push(pureName);
        // 测试可直接打印结果
        console.log(pureName);
      }

      // 这里可以使用处理好的processedNames数组做后续业务逻辑
      console.log('所有无后缀文件名：', processedNames);
    }
  };
  xhttp.open("GET", "imageList.txt", true);
  xhttp.send();
}

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