Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What is going on with this article?
@genyajoe

JS初心者の私が「ん!?」ってなったとこ1:クオート「"」と「'」の違い

More than 5 years have passed since last update.

なんの目的もなくJavaScriptを学び始めて3日。ウェブでいろいろ調べながら、お遊びしていて詰まったところを、備忘録として書いていきます。

(ほんとに初心者なので、)間違っている部分がありましたら、是非ともご指摘下さい。m(_ _)m

ソース

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>jQuery Practice</title>
  </head>
  <body>
    <p>
      Hello World.
    </p>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="jqsample.js"></script>
  </body>
</html>
jqsample.js
$(function() {
  $("p").html("<a href="http://google.com">Google</a>");  
})

ん!?

Google Chrome JavaScript Console上でエラーがでる。

Uncaught SyntaxError: Unexpected string

解決

あたりまえすぎるけど、ダブルクオート4つのせいで、真ん中のクオートが抜けてしまう。

jqsample.jsの「.html()」内のクオートをダブル(")からシングル(')にすると解決。

jqsample.js
$(function() {
  $('p').html('<a href="http://google.com">Google</a>');  
})

クオートの作法をちゃんと学び直そう

よくよく調べてみるとGoogle JavaScript Style Guideの「文字列」の節に、

文字列
" よりも ' を使ってください.
ダブルクオートよりもシングルクオートを使ってください. そのほうが HTML を含む文字列を作る際に便利です.

とありました。

多くのサイトでは、(役割的に)ダブルとシングルには大きな差はないと説明されていますが、JSではシングルクオート癖をつけといた方が良さそうですね。

4
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
genyajoe

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
4
Help us understand the problem. What is going on with this article?