JavaScript

學習如何使用JavaScript將字符串轉換為數字 JavaScript提供了多種將字符串值轉換為數字的方法。 最佳方法：使用Number對象 我個人認為最好的方法是使用Number對象，在非構造函數上下文中使用（不使用new關鍵字）： const count = Number('1234') //1234 這也會處理小數。 Number是一個可以執行多個操作的包裝對象。如果我們使用構造函數（new Number("1234")），它將返回一個Number對象而不是數字值，所以要注意。 注意數字之間的分隔符： Number('10,000') //NaN Number('10.00') //10 Number('10000') //10000 如果需要解析帶有小數分隔符的字符串，請改用Intl.NumberFormat。 其他方法 使用parseInt()和parseFloat() 對於整數，另一個很好的解決方案是調用parseInt()函數： const count = parseInt('1234', 10) //1234 不要忘記第二個參數，即基數，對於十進制數字始終為10，否則轉換可能會嘗試猜測基數並產生意外結果。 parseInt()嘗試從不僅包含數字的字符串中獲取數字： parseInt('10 lions', 10) //10 但是，如果字符串不以數字開頭，將返回NaN（Not a Number）： parseInt("I'm 10", 10) //NaN 與Number一樣，它在數字之間的分隔符上不可靠： parseInt('10,000', 10) //10 ❌ parseInt('10.00', 10) //10 ✅（被視為小數，被截斷） parseInt('10.000', 10) //10 ✅（被視為小數，被截斷） parseInt('10.20', 10) //10 ✅（被視為小數，被截斷） parseInt('10.81', 10) //10 ✅（被視為小數，被截斷） parseInt('10000', 10) //10000 ✅ 如果要保留小數部分而不僅僅獲得整數部分，請使用parseFloat()。請注意，與parseInt()不同，它只接受一個參數 - 要轉換的字符串：...

在網絡應用程序中，上傳文件並在後端進行處理是最常見的文件處理功能之一。例如，上傳頭像或附件。 假設我們有一個HTML文件輸入元素： <input type="file" id="fileUpload" /> 我們在#fileUpload DOM元素上註冊一個變化事件處理程序，當用戶選擇一個圖像時，我們會觸發handleImageUpload()函數並傳入所選文件。 const handleImageUpload = event => { const files = event.target.files const formData = new FormData() formData.append('myFile', files[0]) fetch('/saveImage', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) } document.querySelector('#fileUpload').addEventListener('change', event => { handleImageUpload(event) }) 我們使用Fetch API將文件發送到服務器。當服務器成功返回時，它將在path屬性中發送圖像路徑給我們。 有了這一點，我們可以進行需要的操作，比如用圖像更新界面。 使用Node.js處理文件上傳的服務器端處理 下面是服務器端代碼的詳細說明。我們使用Node.js和Express框架來處理請求。 安裝express-fileupload npm模塊： npm install express-fileupload 在中間件中使用它： import fileupload from 'express-fileupload' //或 const fileupload = require('express-fileupload') 在創建Express應用程序之後，添加以下代碼：...

我遇到了一個問題：我有一個字串包含一個十進制數字，但使用者可以用兩種方式來表示，這包含使用點或逗號： 0,32 0.32 不同的國家使用不同的方法在數字中分隔整數部分和小數部分。 所以我決定在找到逗號時將字串轉換為使用點。 我使用了一個簡單的正則表達式來做到這一點： let value = '0,32' value = value.replace(/,/g, '.') //value 現在為 '0.32' 您可以使用replace(/\./g, ',')來進行相反的操作（請注意在正則表達式中點前面的\，因為它是一個特殊字符）。 正則表達式中的g標誌確保如果逗號（或點在第二個例子中）有多個實例，它們都會被轉換。 這在我們的使用情境下並不適用，我認為我們需要進行更多驗證來檢查輸入的完整性，但這是一個開始。 在我的情況下，在進行這個替換之後，我調用了parseFloat(value)來從字符串中得到浮點數，然後使用toFixed(2)將小數位數限制為2： value = parseFloat(value).toFixed(2)

找出如何使用JavaScript檢查複選框的狀態，看它是否被選中或未選中。 檢查元素的checked屬性。 假設你有這個複選框： <input type="checkbox" class="checkbox" /> 你可以通過以下方法檢查它是否被選中： document.querySelector('.checkbox').checked 你也可以檢查是否找到.checkbox:checked並不返回null： document.querySelector('.checkbox:checked') !== null 但我認為找.checked會更清晰。 請勿使用getAttribute()來查找checked屬性的值，因為如果複選框在默認情況下被選中，它的值始終為true： <input type="checkbox" checked /> 另外，不要檢查複選框元素的value。無論複選框是否被選中，它的值始終是on。

使用JavaScript來檢測暗模式及檢測模式變更 使用CSS，我們可以使用prefers-color-scheme媒體查詢檢測暗模式。 但是… 如果我們必須使用JavaScript呢？最近我遇到了這個問題，因為我有一些JavaScript代碼，該代碼會將圖像添加到頁面上，但我想根據亮/暗模式顯示不同的圖像。 以下是我們可以實現的方法。 首先，檢測matchMedia對象是否存在（否則瀏覽器不支持暗模式，您可以回退到亮模式）。 然後，使用以下代碼檢查是否為暗模式： window.matchMedia('(prefers-color-scheme: dark)').matches 如果啟用了暗模式，它將返回true。 以下是一個完整的示例，如果為暗模式則反轉圖像的顏色： const img = document.querySelector('#myimage') if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { img.style.filter="invert(100%)"; } 然而，還存在一個問題：如果使用者在使用我們的網站時更改了模式該怎麼辦？ 我們可以使用事件監聽器來檢測模式的變更，像這樣： window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', event => { if (event.matches) { //暗模式 } else { //亮模式 } })

通過這篇簡短的指南，您可以學習關於JavaScript正則表達式的所有內容，了解最重要的概念並通過示例展示。 正則表達式介紹 困難但有用 正則表達式是什麼樣子 工作原理 錨定 匹配範圍內的項目 多次匹配範圍項目 否定模式 元字符 正則表達式選項 量詞 + * {n} {n,m} 可選項目 分組 捕獲分組 可選分組 引用匹配的分組 命名捕獲分組 不使用分組的匹配和執行 非捕獲分組 標誌 檢查正則表達式 轉義 字符串邊界 使用正則表達式替換 貪婪模式 先行斷言：根據後面的字符串進行匹配 後行斷言：根據前面的字符串進行匹配 正則表達式和Unicode Unicode屬性逃逸 示例 從字符串中提取數字 匹配電子郵件地址 捕獲雙引號之間的文本 獲取HTML標籤內的內容 正則表達式介紹 正則表達式（也稱為regex）是一種以非常高效的方式處理字符串的方法。 通過使用特殊的語法來定義正則表達式，您可以： 在字符串中搜索文本 在字符串中替換子字符串 從字符串中提取信息 幾乎每一種編程語言都實現了正則表達式。每種實現之間有一些小差異，但是基本概念幾乎都是通用的。 正則表達式可以追溯到20世紀50年代，那時它被正式作為字符串處理算法的一種概念搜索模式。 它在grep、sed等UNIX工具中得到了實現，以及在流行的文本編輯器中使用，在Perl編程語言中引入了正則表達式，隨後在許多其他編程語言中引入。 JavaScript與Perl一起是具有內置的正則表達式支持的編程語言之一。 困難但有用 對於初學者來說，正則表達式可能完全看不懂，但很多時候即使對專業開發人員來說也是如此，除非他們願意投入必要的時間去理解它們。 由於寫出易於理解、易於閱讀和易於維護/修改的正則表達式非常困難，所以使用正則表達式是唯一明智的方法來執行某些字符串操作，因此它是一個非常有價值的工具。 本教程旨在以簡單的方式介紹JavaScript正則表達式，並提供閱讀和創建正則表達式所需的所有信息。 經驗法則是，簡單的正則表達式容易閱讀且易於撰寫，而複雜的正則表達式如果你不深入了解基礎知識，很快就會變得混亂不堪。 正則表達式是什麼樣子 在JavaScript中，正則表達式是一個對象，可以用兩種方式定義。 第一種方式是使用構造函數通過實例化一個新的RegExp對象來定義： const re1 = new RegExp('hey') 第二種方式是使用正則字面量形式： const re1 = /hey/ 您知道JavaScript有對象字面量和數組字面量嗎？它還有正則字面量。 在上面的示例中，hey被稱為模式。在字面形式中，它由斜杠分隔，而使用對象構造函數時則不是。 這是兩種形式之間的第一個重要差異，但我們稍後會看到其他差異。...

透過純粹的JavaScript，我們可以動態地為網頁上的元素應用樣式。 在網頁瀏覽器中，有哪些API可以達成這個目的呢？ 首先，其中最乾淨的方式之一就是為元素新增或移除類別，並使用CSS中的類別樣式。 const element = document.querySelector('#my-element') 您可以使用元素的classList屬性以及其add()和remove()方法： element.classList.add('myclass') element.classList.remove('myclass') 您也可以直接使用style屬性修改元素的每個CSS屬性，該屬性會引用元素的內嵌樣式。 例如，您可以這樣修改元素的顏色： element.style.color = '#fff' 您可以修改元素的邊框： element.style.border = '1px solid black' 您看到了color和border。您可以使用camelCase（駝峰式大小寫）來修改所有的CSS屬性，當CSS屬性名稱包含破折號時。 在這個 MDN 頁面中，您可以方便地找到一個翻譯表，其中列出了所有的CSS屬性。

在項目開發中，我需要獲取一個路徑的最後一個片段。 這個路徑可以是檔案系統路徑，也可以是URL。 以下是我使用的JavaScript程式碼： const lastItem = thePath.substring(thePath.lastIndexOf('/') + 1) 這段程式碼的原理是什麼？ thePath 字串包含一個路徑，例如 /Users/Flavio/Desktop。 我們使用 lastIndexOf('/') 在 thePath 字串上找到最後一個 / 的索引。 然後，我們將這個索引傳遞給 substring() 方法，同樣作用在 thePath 字串上。 這將返回一個新字串，從最後一個 / 的位置開始，再加上 1 (否則我們也會得到 /)。 最後，我們將這個字串賦值給 lastItem。 你也可以將它封裝成一個簡單的函數： const getLastItem = thePath => thePath.substring(thePath.lastIndexOf('/') + 1) getLastItem('/Users') getLastItem('/Users/Flavio') getLastItem('/Users/Flavio/test.jpg') getLastItem('https://flavicopes.com/test') 在上述例子中，​getLastItem 函數分別應用在幾個不同的路徑上。

了解如何使用bcrypt庫在JavaScript中加密和驗證密碼 bcrypt是JavaScript中最常用的用於處理密碼的npm包之一。 這是基本的安全知識，但對於新手開發人員來說值得一提：您永遠不應該以明文形式在數據庫或其他地方存儲密碼。絕對不行。 相反，您需要從密碼中生成一個哈希值，然後將其存儲。 使用方法如下： import bcrypt from 'bcrypt' // 或 // const bcrypt = require('bcrypt') const password = 'oe3im3io2r3o2' const rounds = 10 bcrypt.hash(password, rounds, (err, hash) => { if (err) { console.error(err) return } console.log(hash) }) 您需要將一個數字作為第二個參數傳遞，該數字越大，哈希值就越安全，但生成的時間也越長。 該庫的README文件告訴我們，在2GHz核心上，我們可以生成： rounds=8 : ~40 hashes/sec rounds=9 : ~20 hashes/sec rounds=10: ~10 hashes/sec rounds=11: ~5 hashes/sec rounds=12: 2-3 hashes/sec rounds=13: ~1 sec/hash rounds=14: ~1.5 sec/hash rounds=15: ~3 sec/hash rounds=25: ~1 hour/hash rounds=31: 2-3 days/hash 如果您多次運行bcrypt....

JavaScript提供了许多方法来将用户重定向到不同的网页。学习最常用的方法，也了解一下所有其他选项，使用纯JavaScript。 如果在程序执行期间需要转到另一个页面，JavaScript提供了许多方法来将用户重定向到不同的网页。 其中被认为是规范的导航到新URL的方法是： window.location = 'https://newurl.com' 如果要重定向到同一域中的不同路径，请使用： window.location.pathname = '/new' 这是使用History API提供的location对象来实现的。 其他重定向选项 程序设计的大多数情况下，同一个操作可以有多种方法来执行。 因为浏览器中的window是隐式的，所以你也可以这样做： location = 'https://newurl.com' 另一种方法是设置location的href属性： window.location.href = 'https://newurl.com' location对象还有一个assign()方法，它接受一个URL，并执行相同的操作： window.location.assign('https://newurl.com') replace()方法与前面的方法不同，因为它重写了历史记录中的当前页面。当前页面被抹掉，所以当你点击“返回”按钮时，你会回到现在成为最后访问页面的页面。 window.location.replace('https://newurl.com') 在某些情况下，这可能很方便。 访问window对象的不同方式 浏览器暴露了self和top对象，它们都引用window对象，所以你可以在上述所有示例中使用它们来代替window： self.location = 'https://newurl.com' top.location = 'https://newurl.com' 使用服务器端指令进行301重定向 前面的示例都考虑了程序决定跳转到另一页的情况。 如果需要重定向是因为当前URL已经过时并且需要进一步跳转到新的URL，最好使用服务器级的指令，并设置301 HTTP代码以通知搜索引擎当前URL已经永久移动到新资源。 如果使用Apache，可以通过.htaccess来实现这一点。Netlify通过一个_redirects文件来完成这个任务。 是否可以使用JavaScript进行301重定向？ 不幸的是，不可以。 这是无法在客户端上完成的。 301 HTTP响应代码必须在JavaScript被浏览器执行之前从服务器发送。 实验证明，搜索引擎将JavaScript重定向解释为301重定向。参见这篇Search Engine Land的文章。 Google表示： 使用JavaScript重定向用户可以是一种合理的做法。例如，如果用户登录后将其重定向到内部页面，可以使用JavaScript来实现。在检查JavaScript或其他重定向方法以确保您的网站符合我们的指南时，请考虑意图。请记住，当移动您的网站时，301重定向是最佳选择，但如果您无法访问网站的服务器，则可以使用JavaScript重定向来实现该目的。 使用HTML元标签 另一种选择是在HTML中使用元标签： <html> <head> <meta http-equiv="refresh" content="0;URL=https://newurl.com/"> </head> </html> 这将导致浏览器在加载并解析当前页面后加载新页面，并且不会向搜索引擎发送任何信号。始终使用301服务器级别重定向是最佳选择。