在 JavaScript 中寫新行

在 JavaScript 中新增一行，可在字串中使用 \n 跳脫序列，或使用含有實際換行的樣板字串。這兩種方式都適用於字串與主控台輸出。若要在瀏覽器中顯示文字，請建立 HTML <br> 元素或使用不同的區塊元素；字串中的換行字元不會自動變成可見的 HTML 換行。

使用跳脫序列插入換行

\n 跳脫序列代表 JavaScript 字串中的換行字元。將它放在下一行應開始的位置，再把字串傳給所需的輸出方法。例如，console.log() 會將換行字元輸出到主控台，因此訊息會顯示為兩行。

執行以下範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const message = "Hello, World!\nWelcome to JavaScript.";
console.log(message);

同一個字串也可以儲存、串接，或傳遞給其他函式。換行字元是字串值的一部分，不依賴 console.log()。如果輸出目的地不會以視覺方式呈現換行字元，例如一般 HTML 文字，就應改用適合該目的地的呈現方式。

此範例的輸出分成兩行。程式碼與輸出區塊依原樣保留，其中顯示的英文文字也維持英文。

使用樣板字串建立多行字串

樣板字串以反引號括住，字串內容可以跨越多行原始碼。反引號內的換行會成為字串的一部分，因此撰寫較長的固定文字時，這種寫法通常更容易閱讀。樣板字串也支援使用 ${expression} 插入運算式的值，讓你不必手動串接字串。

執行以下範例：

本節中的程式碼以及顯示的標籤或輸出仍為英文。

const name = "JavaScript";
const message = `Hello, World!
Welcome to ${name}.`;
console.log(message);

如果原始碼本身適合排成多行，或字串需要插入變數值，可以使用樣板字串。如果文字較短，或想在單行字串的特定位置明確標示換行，則可使用 \n。兩種方式都會產生包含換行字元的字串，但都不會決定瀏覽器如何顯示它。

範例的程式碼與輸出區塊依原樣保留，其中顯示的英文文字也維持英文。

在 HTML 中呈現換行

在瀏覽器內容中，<br> 會在文字內呈現換行。固定頁面內容可以直接在 HTML 中寫入換行標記。若內容是動態產生的，請使用 document.createElement("br") 建立元素，並將它附加在文字節點之間；這樣值會以文字處理，而不會被瀏覽器當成標記字串解析。

本節中的程式碼以及顯示的標籤或輸出仍為英文。

<p>Hello, World!<br>Welcome to JavaScript.</p>

這是靜態瀏覽器頁面的 HTML 範例，不是主控台範例，也不是執行時輸出。若內容包含動態值，請優先使用 textContent 或文字節點。將不受信任的輸入指定給 innerHTML，可能使瀏覽器把輸入解讀為標記，造成跨網站指令碼攻擊風險。只有在標記可信任且確實需要解析時，才使用 innerHTML。

CSS 的 margin 和 padding 可以增加不同元素之間的視覺間距，但不會在 JavaScript 字串中插入換行字元，也不會在文字節點內建立換行。字串內容請使用 \n 或多行樣板字串；瀏覽器文字內需要換行時使用 <br>；元素之間需要調整版面間距時則使用 CSS。