一、從URL中提取參數
有下列字符串：
var linkURL = 'http://localhost:8080/String/string_6.html?昵稱=小西山子&age=24#id1';
對於一個真實的URL地址，可以用js來讀取location中的相關信息來獲得某些信息，下面列舉一些：
復制代碼 代碼如下:
location.origin : http://localhost【域】
location.pathname : /project_js/Javascript/js_basic/demo/String/string_6.html【URL路徑】
location.host : localhost【主機+端口】
location.hostname : localhost【主機名】
location.port :【端口】
location.search : ?name=xesam【查詢字符串】
location.hash : #age【錨點】
location.href : http://localhost/project_js/Javascript/js_basic/demo/String/string_6.html?name=xesam#age【完整形式】
location.protocol : http【協議】
其中，與從URL中提取參數主要是用到location.search。不過為了通用，我們不去讀取location.search，直接處理字符串。
提取字符串查詢字符串之後，轉化為對象的形式。
先討論幾種查詢字符串的情況：
（1）?昵稱=小西山子&age=24#id1 -->{昵稱:'小西山子',age:'24'}
（2）?昵稱&age=24#id1'; -->{昵稱:undefined,age:'24'}
（3）?=小西山子&age=24#id1 -->{age:'24'}
（4）?昵稱=小西山子=又一個&age=24&age=24#id1 -->{昵稱:'小西山子=又一個',age:['24','24']}
復制代碼 代碼如下:
function toQueryParams(){
var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/);//提取location.search中'?'後面的部分
if(!search){
return {};
}
var searchStr = search[1];
var searchHash = searchStr.split('&');
var ret = {};
for(var i = 0, len = searchHash.length; i < len; i++){ //這裡可以調用each方法
var pair = searchHash[i];
if((pair = pair.split('='))[0]){
var key = decodeURIComponent(pair.shift());
var value = pair.length > 1 ? pair.join('=') : pair[0];
console.log()
if(value != undefined){
value = decodeURIComponent(value);
}
if(key in ret){
if(ret[key].constructor != Array){
ret[key] = [ret[key]];
}
ret[key].push(value);
}else{
ret[key] = value;
}
}
}
return ret;
}
console.dir(toQueryParams.call(linkURL));
上面基本就是Prototype中toQueryParams的實現，上面又一個步驟是用'='分割參數，然後在value中再拼接。另外可以用substring來實現：
復制代碼 代碼如下:
function toQueryParams(){
var search = this.replace(/^\s+/,'').replace(/\s+$/,'').match(/([^?#]*)(#.*)?$/);
if(!search){
return {};
}
var searchStr = search[1];
var searchHash = searchStr.split('&');
var ret = {};
searchHash.forEach(function(pair){
var temp = '';
if(temp = (pair.split('=',1))[0]){
var key = decodeURIComponent(temp);
var value = pair.substring(key.length + 1);
if(value != undefined){
value = decodeURIComponent(value);
}
if(key in ret){
if(ret[key].constructor != Array){
ret[key] = [ret[key]];
}
ret[key].push(value);
}else{
ret[key] = value;
}
}
});
return ret;
}
console.dir(toQueryParams.call(linkURL));
一、對象轉換為URL查詢參數
對象轉換為URL查詢參數就麻煩一點。不過由於是轉換成查詢參數形式，因此只能處理單層嵌套的對象，子對象就不能處理了。其原理就是toQueryParams的反向操作。
復制代碼 代碼如下:
function toQueryPair(key, value) {
if (typeof value == 'undefined'){
return key;
}
return key + '=' + encodeURIComponent(value === null ? '' : String(value));
}
function toQueryString(obj) {
var ret = [];
for(var key in obj){
key = encodeURIComponent(key);
var values = obj[key];
if(values && values.constructor == Array){//數組
var queryValues = [];
for (var i = 0, len = values.length, value; i < len; i++) {
value = values[i];
queryValues.push(toQueryPair(key, value));
}
ret = ret.concat(queryValues);
}else{ //字符串
ret.push(toQueryPair(key, values));
}
}
return ret.join('&');
}
console.log(toQueryString({
name : 'xesam',
age : 24
})); //name=xesam&age=24
console.log(toQueryString({
name : 'xesam',
age : [24,25,26]
})); //name=xesam&age=24&age=25&age=26
真實源碼中用的是inject方法，不過在Enumerable部分，因此上面作了替換。