跳脫字符(Escape Characters)介紹

在 JavaScript 中,跳脫字符(escape characters)是用來在字串中插入特殊字符或符號。這些字符以反斜線 \\\\ 開頭,後面跟著一個特殊的字符或符號。跳脫字符告訴 JavaScript 編譯器,接下來的字符應該被當作普通字符處理,或代表特定的控制指令。

常見的跳脫字符

跳脫字符 說明 JavaScript 例子
\\\\n 換行符(newline) console.log("Hello\\\\nWorld");
\\\\t 制表符(tab) console.log("Hello\\\\tWorld");
\\\\\\\\ 反斜線(backslash) console.log("This is a backslash: \\\\\\\\");
\\\\" 雙引號(double quote) console.log("He said, \\\\"Hello!\\\\"");
\\\\' 單引號(single quote) console.log('It\\\\'s a nice day');
\\\\r 回車符(carriage return) console.log("Hello\\\\rWorld");
\\\\b 退格符(backspace) console.log("Hello\\\\bWorld");
\\\\f 換頁符(form feed) console.log("Hello\\\\fWorld");

例子

  1. 換行和制表符

    console.log("Hello\\\\tWorld\\\\nThis is a new line");
    
    輸出:
    Hello   World
    This is a new line
    
  2. 雙引號和單引號

    console.log("He said, \\\\"Hello!\\\\"");
    console.log('It\\\\'s a nice day');
    
    輸出:
    He said, "Hello!"
    It's a nice day
    

在 JavaScript 中,這些跳脫字符幫助你在字串中插入控制符號或特殊字符,從而方便進行格式化或處理特殊情況。

補充:https://www.w3schools.com/js/js_strings.asp

在 JavaScript 中,模板字面量(Template Literals)是用來處理字串的一種新語法,讓你能夠更靈活地處理字串,包括插入變數、使用多行字串等。模板字面量使用反引號(```)來包圍字串,而不是傳統的單引號(')或雙引號(")。

特點與用法

  1. 多行字串 使用模板字面量可以很方便地處理多行字串,而不需要使用跳脫字符 \\\\n

    const multiLineString = `這是第一行
    這是第二行
    這是第三行`;
    console.log(multiLineString);
    
    
  2. 插入變數 可以使用 ${} 語法來插入變數或表達式到字串中。


const name = "Alice";
const age = 25;
const introduction = `你好,我是 ${name},今年 ${age} 歲。`;
console.log(introduction);

  1. 表達式計算 可以在 ${} 中寫任何有效的 JavaScript 表達式。

    const a = 5;
    const b = 10;
    const result = `5 加 10 等於 ${a + b}`;
    console.log(result);
    
    
  2. 嵌套模板字面量 可以在模板字面量內部嵌套其他模板字面量。

    const outer = `這是外層字串,裡面有 ${`這是內層字串`}`;
    console.log(outer);
    
    

示例

  1. 多行字串

    const message = `這是一個多行字串範例。
    你可以在這裡寫很多行文字,
    而不需要使用跳脫字符。`;
    console.log(message);
    
    
  2. 插入變數

    const user = "Bob";
    const greeting = `嗨,${user}! 今天的天氣如何?`;
    console.log(greeting);
    
    
  3. 表達式計算

    const price = 19.99;
    const quantity = 3;
    const total = `總金額是 ${price * quantity}`;
    console.log(total);