変数でJQueryのCSSメソッドに値を指定する際の不具合について

Question

###前提・実現したいこと
JQueryで、時間ごとに背景画像を変更するという実装を行っています。

###該当のソースコード

	getTime = (new Date()).getHours();
	if(getTime >= 6 && getTime < 16){
		backImg = "images/img-background.jpg";
	} else if(getTime >= 16 && getTime < 6){
		backImg = "images/img-background02.jpg";	 
	}
	$("#content-articles").css("background-image","url("+ backImg +")");

###発生している問題・エラーメッセージ
getHoursで時間を取っていて、if文で分岐、backImgという変数に背景画像を入れているのですが、
最後の一文の

$("#content-articles").css("background-image","url("+ backImg +")");

ここのurlの後のbackImgがこれだと反映されるのですが、

$("#content-articles").css("background-image","url(backImg)");

これだと、backImgが変数として扱われないのです。
それがなぜなのかが分かりません。

色々調べてみて、文字列リテラルとか出てきたのですが、いまいち理解できませんでした。詳しく教えていただきたいです。

宜しくお願い致します。

Answer 1

文字の部分をを変数として扱われると

もしそれが変数として扱われると、大変なことになります。
console.log()でinfomationと10回表示したいときに

for(var i = 0; n < 10; n++){
   console.log("infomation")
}

としますが、""で囲われた部分でもiが変数として扱われると

0fomat0on
1fomat1on
2fomat2on
...
と表示されるのです。
宣言された変数が含まれる文字列を扱えなくなってしまいます。
こうなるプログラミング言語を私は知りません。

解釈のされ方

""で囲われた部分が変数として扱われないのは言語仕様という他ありません。
ブラウザがどう解釈するかというと
"url("+ backImg +")" → 文字列+変数+文字列
"url(backImg)" → 文字列
となります。下の例では変数として解釈されません。

下のような挙動をするはずです。試してみてください。

var j = 130;

var i = "j"; // 文字列
console.log(i); // [j]

var i = j; // 変数
console.log(i); // [130]

var i = "j" + j; // 文字列+変数
console.log(i); // [j130]

リテラルとは

リテラルとは、ソースコード上に埋め込まれたデータのことです。
文字列リテラルとは、ソースコード上に文字列として解釈される書き方で書かれたリテラルです。

変数を""で囲っちゃいけないのは、文字列リテラルとして解釈されないようにするため。
変数の先頭を数値にしちゃいけないのは、数値リテラルとして解釈されないようにするため。
また、true/false、nullやundefinedなどを変数名として扱っちゃいけないのは、論理値リテラルや特殊なリテラルとして解釈されないようにするため。

こういったリテラルになるのを避けて変数名をつけるのは経験があるかと思います。

Answer 2

前者で実際にcssメソッドに渡される文字列は"url(images/img-background.jpg)"ですが、後者は"url(backImg)"という文字列です。前者は正しく画像へのパスとなっていますが、後者はcssに「backImg」という文字列を渡してしまっているので、正しい画像のパスになっていません。cssにはJavaScriptの変数を参照する機能はないので、文字列として出来上がったものを渡してやらないと動作しません。

Answer 3

これだと、backImgが変数として扱われないのです。

それがなぜなのかが分かりません。

むしろ見たままだと思いますが・・・
"url(backImg)"ですから「url(backImg)」という文字列ですよね？

Comments

[退会済みユーザー]

あ、、、、理解できました、、、、（恥ずかしい）すみません。ありがとうございます。