變數 string 介紹

Posted on In

這篇要介紹的是「變數的 string 型別」

html:

1
2
3
4
5
6
<div class="gift">
    <img src="https://i.ibb.co/xJW0Kt1/1-chocolate.jpg" width="150" alt="cake">
    <p>Hello <em id="myName"></em>:</p>
    <h2>祝妳生日快樂</h2>
    <p class="sendName">juju</p>
</div>

現在，我要做的是：在下圖中紅色箭頭處的地方（也就是<em id="myName"></em>），用 JS 插入我的名字

作法如下：

將「字串」設為變數

🎃 「數字」與「字串」的差別在於：

🍋 數字 number 不需要用「單引號」把值包起來

1
var price = 3;

🍋 字串 string 需要用「單引號」把值包起來

1
var indexName = '親愛的';
  • 這是 JS 的格式規定
  • 因為，要插入的內容是屬於「文字」，所以我設定的變數是var indexName = '親愛的';

🎃 getElementById('myName') 這裡要使用「單引號」，也是因為「myName」是一個「id」，是屬於「字串」（它並不是“變數”）

JS:

1
2
3
var indexName = '親愛的';

document.getElementById('myName').textContent = indexName;

可以看到，文字內容就插入了

接連插入變數

要如何將兩個變數「接連插入」呢？

方式一：用「+」連接兩個變數

🎃 因為我想要讓「Hola」跟「親愛的」中間空一格，因此，在設定變數時，就在「Hola」後面空一格

1
var polite = 'Hola ';

JS:

1
2
3
4
5
var polite = 'Hola ';

var indexName = '親愛的';

document.getElementById('myName').textContent = polite + indexName;

方式二：設定第三個變數，把前兩個變數加在一起

🎃 用「+」連接兩個變數

JS:

1
2
3
4
5
var polite = 'Hola ';
var indexName = '親愛的';
var total = polite + indexName;

document.getElementById('myName').textContent = total;

也會得到相同的結果

變數 + 字串

🎃 使用「+」連接「變數、字串（我愛妳）」

JS:

1
2
3
4
5
var polite = 'Hola ';
var indexName = '親愛的';
var total = polite + indexName + ' 我愛妳';

document.getElementById('myName').textContent = total;

用 Console 除錯

🎃 如果 JS 程式碼有寫錯，都可以在開發者工具的 Console 看到，是 JS 的哪一行出錯了

如下圖的箭頭處
–> all.js 的第四行出錯了