零基础编程者求助：JS获取URL参数并在HTML中应用问题

嘿，很高兴看到你作为编程新手已经写出能正常运行的URL参数提取代码啦！这真的超棒👏 下面我给你好好拆解下这段代码，再分享几个适合新手的优化小建议：

首先先把你这段可用的代码贴出来：

function qs(search_for) { 
var query = window.location.search.substring(1); 
var parms = query.split('&'); 
for (var i=0; i<parms.length; i++) { 
var pos = parms[i].indexOf('='); 
if (pos > 0 && search_for == parms[i].substring(0,pos)) { 
return parms[i].substring(pos+1);; 
} 
} 
return ""; 
}

这段代码到底是怎么工作的？ #

我给你一步步拆解，用大白话讲清楚：

• window.location.search 会抓取URL里?后面的所有内容，比如你的URL是https://example.com?name=luca&age=25，它就会返回?name=luca&age=25
• .substring(1) 是去掉开头的?，得到name=luca&age=25
• .split('&') 把字符串按&拆成数组，变成["name=luca", "age=25"]
• 接着循环遍历这个数组，每个元素里用indexOf('=')找到=的位置，把参数名和参数值分开
• 如果找到和你传入的search_for匹配的参数名，就返回对应的参数值；要是遍历完都没找到，就返回空字符串

给新手的小优化建议 #

虽然代码已经能用，但可以调整得更规范、更健壮：

• 修复多余分号：代码里return parms[i].substring(pos+1);;多了一个分号，去掉一个就好
• 用更清晰的变量声明：如果你的运行环境支持（现在大部分浏览器都支持），可以用let/const替代var，让变量的作用域更明确：

function qs(searchFor) { 
  const query = window.location.search.substring(1); 
  const parms = query.split('&'); 
  for (let i = 0; i < parms.length; i++) { 
    const pos = parms[i].indexOf('='); 
    if (pos > 0 && searchFor === parms[i].substring(0, pos)) { 
      return parms[i].substring(pos + 1);
    } 
  } 
  return ""; 
}

• 处理URL编码问题：URL里的参数值有时候会被编码（比如空格变成%20），可以加上decodeURIComponent()来解码，让获取到的内容更准确：

return decodeURIComponent(parms[i].substring(pos + 1));

这样你的代码就更完善啦！之后如果有具体的使用场景问题或者想扩展功能，随时说~

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