jQuey(又はJavaScript)で変数に改行の無い文字列を代入する時、通常はシングルクゥオート( ' ) やダブルクゥオート( " )で囲います。 しかし、改行を含む長文の文字列を代入するにはどうするか？ この場合は、バッククゥオート( ` ) を使う必要があることが分かりました。 バッククゥオート記号の入力方法はShiftキーを押しながら「＠」キーを押下します。
備考：バッククゥオート(｀)で全体を囲って記述するテンプレートリテラルが最近になり使える様になりました。 テンプレートリテラルは、代入するhtml codeをそのままのイメージで記述できます。
最近ブログで紹介した「ヴェルディのLA TRAVATA（椿姫）」記事中のPlay Listで、jQueryの変数に代入する複数行の文字列をシングルクゥオート( ' ) で囲ったため、jQuey scriptが上手く機能せず手こずりました。 今回は、この事例紹介です。
シングルクゥオート「 ’ 」を使ったために発生したトラブル事例紹介
下の「HTML & jQuery script」コードは、jQueryの変数(myString_test1)へ代入した文字列を、class指定された特定要素（場所）に表示させるscriptです。
変数 myString_test1 にバッククゥオート「｀」で囲んだ改行付きのhtml文字列を代入していますが、間違えてシングルクゥオート「 ’ 」を使用するとどうなるか？ 後段のCase1で示します。 また、正しくバッククゥオート「｀」を使用した場合をCase2で示します。
要は、改行付きの文字列を変数に代入するには、バッククゥオート「｀」を使わないとjQueryが機能しません。 シングルクゥオートとバッククゥオートの記号は非常に近似しているので注意が必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="test"></div> <script> // バッククゥオート「｀」を使用して囲むこと！ var myString_test1 = ` <p><b>第1幕の粗筋</b></p> <ol> <li>パリ、ヴィオレッタの家のサロンで華やかな社交界が開かれています。 ヴィオレッタは「楽しみこそが苦しみの薬よ」と歌っています。</li> <li>ガストン子爵が友人のアルフレードをヴィオレッタに紹介します。 ガストンはヴィオレッタに小声で「アルフレードはあなたのことをいつも気にかけている」と告げます。</li> </ol>` $(".test").html(myString_test1); </script> |
1行目：div要素にclass="test"を指定している。 12行目jQuery「html()」メソッドでhtmlの内容が出力される。
5行目：変数 myString_test1 にバッククゥオート「｀」で囲んだhtmlコードを代入。シングルクゥオート「 ’ 」を使用するとjQueryが機能しない
12行目：jQuery「html()」メソッドで変数 myString_test1 の内容をclass要素(test)先に出力する。
Case1：シングルクゥオート「 ’ 」を使用
class="test" で指定した特定要素はここ
jQueryが機能せず、上の特定要素に変数 「myString_test1」が表示されない！
シングルクゥオート「 ’ 」を使用するには、改行を止めて、１行で記述すればjQueryが機能する様になるがコードが非常に見難くオススメしません。
Case2:バッククゥオート「｀」を使用
class="test" 指定した特定要素はここ
上の特定要素に変数 「myString_test1」が正しく表示された！
【参考】Play List： LA TRAVATA（椿姫）の全曲を聴く
-
-
ヴェルディのLA TRAVATA（椿姫）のレコードをハイレゾ収録しました。
ハイレゾ収録したレコードは、1962年録音7月（前の録音） アントニーノ・ヴォットが指揮したヴェルディのオペラ-LA TRAVATA（椿姫）です。 このレコードは、ドイツ・グラモフォンによるミラノ･ス ...