値がnullの時にif文が実行されない

Question

$(function () {
  var urlParam = location.search.substring(1);

  if(urlParam) {
    var param = urlParam.split('&');
    var paramArray = [];

    for (i = 0; i < param.length; i++) {
      var paramItem = param[i].split('=');
      paramArray[paramItem[0]] = paramItem[1];
    }

    if (urlParam == 'param=aaa') {
      $('.link').append('<a href="https://text/aaa/" target="_blank"><img src="images/link_off.png" alt=""></a>');
    } else if (urlParam == 'param=bbb') {
      $('.link').append('<a href="https://text/bbb/" target="_blank"><img src="images/link_off.png" alt=""></a>');
    } else {
      $('.link').append('<a href="https://text/" target="_blank"><img src="images/link_off.png" alt=""></a>');
    }
    console.log(urlParam);
  }
});

上記のコードでurlParamが
空（というか存在していない時？）の時に
最後のelseの処理が実行されません。

このような場合は
urlParamを部分をどのように記述したらよいのでしょうか？

値が入っていない時の初期をnullなどに設定しても
おそらくurlParam自体がないので実行できませんでした。

ご教示お願いします。

Comments

[defghi1977]

if文が二重になっているのはなぜですか？

[MeB]

すみません。特に理由はありません。参考にしていたサイト様がこのようになっていたからです。

[defghi1977]

ということはあなたはコードを読んでいないということですね？

[MeB]

そういうわけではありませんが、実際解決していないので読んでいないようなものですね。失礼しました。

Answer 1

urlParamが空なら、最初のif(urlParam)がtrueにならないので、こういうことでいいですかね

	var urlParam = location.search.substring(1);
	
	if(urlParam) {
		var param = urlParam.split('&');
		var paramArray = [];

		for (i = 0; i < param.length; i++) {
			var paramItem = param[i].split('=');
			paramArray[paramItem[0]] = paramItem[1];
		}
	}
	if (urlParam == 'param=aaa') {
		$('.link').append('<a href="https://text/aaa/" target="_blank"><img src="images/link_off.png" alt=""></a>');
	} else if (urlParam == 'param=bbb') {
		$('.link').append('<a href="https://text/bbb/" target="_blank"><img src="images/link_off.png" alt=""></a>');
	} else {
		$('.link').append('<a href="https://text/" target="_blank"><img src="images/link_off.png" alt=""></a>');
	}

Comments

[MeB]

ご回答ありがとうございます！

Answer 2

  var urlParam = location.search.substring(1);

  if(urlParam) { //←ここ

null 正確にはundefinedの判定をしているので、elseまで処理がながれません。

if(urlParam === undefined) {
  //nullの時に行いたいこと。
  return;
}
//nullじゃない時に行いたいこと。

あと、IE対応をしなくてもよいなら、URLSearchParamsが使えると思います。

---

2018/03/23追記

コメント欄のコードから引用します。

if(urlParam === undefined) {
    //nullの時に行いたいこと。
    urlParam = 'null'; // ※1
    return;   // ※2
} else if(urlParam) { // ※3
    // 「&」が含まれている場合は「&」で分割
    var param = urlParam.split('&');

    // パラメータを格納する用の配列を用意
    var paramArray = [];

    // 用意した配列にパラメータを格納
    for (i = 0; i < param.length; i++) {
        var paramItem = param[i].split('=');
        paramArray[paramItem[0]] = paramItem[1];
    }
}

※1～※3まで
どういう条件の時に何の処理を行っているかを質問者様の言葉で説明してみてくださいな。

---

location.search.substring(1);の戻り値はundefinedではないのですね。誤回答失礼しました。

$(function (){
    var urlParam = location.search.substring(1);
    if(urlParam == '') {
        $('.link').append('<a href="https://text/" target="_blank"><img src="images/link_off.png" alt=""></a>');
        return;
    }
    // 「&」が含まれている場合は「&」で分割
    var param = urlParam.split('&');
    // パラメータを格納する用の配列を用意
    var paramArray = [];

    // 用意した配列にパラメータを格納
    for (i = 0; i < param.length; i++) {
        var paramItem = param[i].split('=');
        paramArray[paramItem[0]] = paramItem[1];
    }
    if (urlParam == 'param=aaa') {
        $('.link').append('<a href="https://text/aaa/" target="_blank"><img src="images/link_off.png" alt=""></a>');
    } else if (urlParam == 'param=bbb') {
        $('.link').append('<a href="https://text/bbb/" target="_blank"><img src="images/link_off.png" alt=""></a>');
    }
    console.log(urlParam);
});

お詫びついでにURLSearchParamsを使ったコード＆rel="noopener"を追加したコードをおいておきます。
失礼しました。

$(function (){
    var searchParams = new URLSearchParams(location.search);
    // target _blankで開くリンクはrel="noopener"を付けると安全になります。
    if (!searchParams.has('param')) {
        $('.link').append('<a href="https://text/" target="_blank" rel="noopener"><img src="images/link_off.png" alt=""></a>');
        return;
    }
    sub_dir = searchParams.get("param");
    $('.link').append('<a href="https://text/' + sub_dir + '/" target="_blank" rel="noopener"><img src="images/link_off.png" alt=""></a>');
});

Comments

[MeB]

null認識を間違えていました。
ありがとうございます！！！

[MeB]

解決済みのあとで申し訳ございません。
if(urlParam === undefined) {
//nullの時に行いたいこと。
urlParam = 'null';
return;
} else if(urlParam) {
// 「&」が含まれている場合は「&」で分割
var param = urlParam.split('&');

// パラメータを格納する用の配列を用意
var paramArray = [];

// 用意した配列にパラメータを格納
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}
}
このようにしてみたのですが、コンソール上ではエラーのままです…
このような書き方ではないのでしょうか？
よろしくお願いします。

[MeB]

if(urlParam === undefined) {
//nullの時に行いたいこと。
urlParam = 'null'; // nullという文字列を入れる
return; //関数内の処理終了？（すみません。これはよく把握しておりませんでした。勉強します）
} else if(urlParam) { // urlParamに値があった場合は

この程度しか把握しておりません。

[MeB]

あ、すみません。色々かぶってしまいました…

[MeB]

1行1行説明できるように勉強していきたいと思います。
この度は本当にありがとうございます！！！

[umyu]

＞MeBさんへ
returnは関数の終了処理なので、後続の処理に流れないのです。私が言いたかったことはurlParam にnullを設定しても、returnしているので、後続の処理に流れないと言うことです。

回答部分に追記した追加コードの1個目のコードが質問文にできるだけ合わせた形の回答で、下の回答がURLSearchParamsを使った回答です。

[MeB]

returnの件ありがとうございます。

わざわざ質問文に寄せてくださりありがとうございます。

Answer 3

まず、その変数がnullかどうかを判断してその処理を書きます