広告 WordPress関連

jQueyの変数に改行を含む文字列(html)を代入した時に遭遇したトラブル顛末記

スポンサーリンク

 

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行目: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」が表示されない!

備考:
シングルクゥオート「 ’ 」を使用するには、改行を止めて、1行で記述すればjQueryが機能する様になるがコードが非常に見難くオススメしません。

 

Case2:バッククゥオート「`」を使用

class="test" 指定した特定要素はここ

上の特定要素に変数 「myString_test1」が正しく表示された!

 

オペレータ
オペレータ
下のPlay Listは、初めシングルクゥオート( ' )を使用してしまったために、jQueryが機能せず粗筋や配役が表示されませんでした。 悩んだ末にバッククゥオート「`」に変更することで正常にjQueryが機能する様になったものです。 参考として示します。

 

【参考】Play List: LA TRAVATA(椿姫)の全曲を聴く

Play ListのSide1〜4を選択すると配役や粗筋の表示が切り替ります。
出典元
ハイレゾ収録の贅沢:アントニーノ・ヴォット指揮、ヴェルディ『椿姫』の1962年録音盤が奏でる感動の名演!

ハイレゾ収録したレコードは、1962年録音7月(前の録音) アントニーノ・ヴォットが指揮したヴェルディのオペラ-LA TRAVATA(椿姫)です。 このレコードは、ドイツ・グラモフォンによるミラノ・ス ...

 

以上、jQueyの変数に改行を含む文字列(html)を代入した時に遭遇したトラブル顛末記でした。 シングルクゥオート とバッククゥオートの記号は近似しており間違え易いので注意が必要です。

 

スポンサーリンク

 

スポンサーリンク

 

t