質問: "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が変数として扱われないのです。 それがなぜなのかが分かりません。 色々調べてみて、文字列リテラルとか出てきたのですが、いまいち理解できませんでした。詳しく教えていただきたいです。 宜しくお願い致します。
回答: 文字の部分をを変数として扱われると もしそれが変数として扱われると、大変なことになります。 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などを変数名として扱っちゃいけないのは、論理値リテラルや特殊なリテラルとして解釈されないようにするため。 こういったリテラルになるのを避けて変数名をつけるのは経験があるかと思います。