iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
自我挑戰組

從0到有學習JavaScript系列 第 8

第三章 型別、值和變數-問題筆記 反斜線字元、正規表達式

  • 分享至 

  • xImage
  •  

問題一、什麼是JavaScript中的反斜線字元?
(一)概念一、反斜線加上後面字元,兩者結合後,可以表達原本在字串中,無法表示的字元。
舉例來說:

\\:反斜線 (backslash, \u005C)
\':撇號(apostrophe)或單引號(single quote, \u0027)
\":雙引號(double quote, \u0022)
\n:換行 (newline, \u000A)
\t:水平tab (horizon tab, \u000B)
\r:Carriage return (\u000D)
\b:空格 (backspace, \u0008)
\f:From feed (\u000C)
\xnn:兩位十六進位數字 nn 所指定的 Unicode 字元
\unnnn:四位十六進位數字nnnn所指定的 Unicode 字元
\u{n}:編碼位置(codepoint)n所指定的 Unicode 字元,其中n是一到六位的十六進位數字,介於0和10FFFF之間(ES6)
\xA9:版權符號

(二)概念二、\字元皆在任何字元之前,反斜線會被自動忽略,例如:\#等同於 #

'You\'re right, it can\'t be a quote'

這個字串 'You\'re right, it can\'t be a quote' 實際上代表著一個包含單引號的字串,解析出來的字串的內容是:You're right, it can't be a quote
如果不使用反斜線的話,而直接寫成 'You're right, it can't be a quote',那麼 JavaScript會誤以為將第一個單引號後的內容視為代碼的結束,而導致錯誤。

反斜線也可用來畫符號,在瀏覽器上輸入

'\u03c0'   //跑出 π
'\u{1f600}'   //😀

問題二、正規表達式 (Regular Expression)是什麼?
正則表達式(Regular Expression,簡稱 RegExp)是一種強大的字串模式匹配工具,用於搜索、查找、替換和匹配文字中的特定模式。

這個程式碼用來說明一個簡單的正規表達式的用法:

// 正規表達式模式,用於匹配電子郵件地址
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// 要檢查的字串
const inputString = 'example@email.com';

// 使用正規表達式測試字串
if (emailPattern.test(inputString)) {
  console.log('這是一個有效的電子郵件地址');
} else {
  console.log('這不是一個有效的電子郵件地址');
}

在直方圖範例中,常常看到分行符號和正規表達式/\n/,擷取了一段程式碼來看看:

// added custom plugin to wrap label to new line when \n escape sequence appear
var labelWrap = [
    {
        beforeInit: function (chart) {
            chart.data.labels.forEach(function (e, i, a) {
                if (/\n/.test(e)) {
                    a[i] = e.split(/\n/);
                }
            });
        }
    }
];

if (/\n/.test(e)) 這一行使用正規表達式來檢查該標籤文字 e 是否包含換行符號(\n)。如果標籤文字中包含換行符號,則進入下一個步驟。
a[i] = e.split(/\n/); 這一行使用 split(/\n/) 方法將包含換行符號的標籤文字 e 拆分成多行文字,然後將這個文字陣列賦值給原來的標籤 a[i]。這樣,圖表將顯示多行標籤文字。

Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape
https://5xruby.tw/posts/15min-regular-expression
https://codepen.io/abir_maiti/pen/rNxYdLq


上一篇
第三章 型別、值和變數-問題筆記 BigInt
下一篇
第三章 型別、值和變數-問題筆記 Chart.js 與分行符號
系列文
從0到有學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言