JavaScript

如何開始使用 Svelte 自從我開始使用 Hugo 作為靜態網站生成器創建網站以來，我喜歡這種在網絡上發布的方式，相對於使用動態生成頁面的 CMS，這是我過去習慣的方式。 Svelte 是一個 JavaScript 框架，它給我一種相同的感覺。與 React、Vue、Angular 和其他框架相比，使用 Svelte 構建的應用是事先編譯的，您的網站訪問者不需要網絡中的框架和庫代碼，結果是體驗更順暢，消耗帶寬更少，一切都感覺更快和更輕量級。 就像 Hugo 一樣，在部署時，Svelte 消失了，你只得到純 JavaScript。 但讓我們跳轉到文章的主要內容。如何開始使用 Svelte。 需要安裝 Node.js。如果你還沒有安裝，請參考我的如何安裝 Node.js文章！ 並確保它是最新版本的（如何更新 Node.js）。 Node 安裝了npx命令，這是一種運行 Node 命令的便捷方式。特別是我們將運行以下命令： npx degit sveltejs/template firstapp 這將下載並運行degit 命令，它接下來會下載位於https://github.com/sveltejs/template的 Svelte 項目模板的最新代碼到firstapp文件夾中。 現在進入 firstapp 文件夾，運行 npm install 下載模板的其他依賴項。在撰寫本文時，這些依賴項如下： "npm-run-all" "rollup" "rollup-plugin-commonjs" "rollup-plugin-livereload" "rollup-plugin-node-resolve" "rollup-plugin-svelte" "rollup-plugin-terser" "svelte" 如您所見，其中包括 Svelte 核心，還有 Rollup（一個替代 Webpack 的工具）及其一些插件。此外還有 npm-run-all，它是一個用於並行或串行運行多個 npm 腳本的 CLI 工具。 現在，我們可以運行開發模式下的 Svelte 網站，運行以下命令： npm run dev 這將在默認情況下在 localhost 的 5000 端口啟動應用程序：...

在 Svelte 中處理狀態更新 如何使用 Svelte 中的反應式賦值來處理組件內的狀態更新 Svelte 的一個很棒的地方是，你不需要做任何特殊的事情來更新組件的狀態。 你只需要一個賦值操作。 假設你有一個 count 變量。你可以用 count = count + 1 或者 count++ 來對其進行增加： <script> let count = 0 const incrementCount = () => { count++ } </script> {count} <button on:click={incrementCount}>+1</button> 如果你對現代 Web 框架如何處理狀態更新的方式不熟悉的話，這沒有什麼突破性的。但是在 React 中，你需要調用 this.setState() 或使用 useState() hook。 Vue 則採取了一種更結構化的方法，使用類和 data 屬性。 在使用過這兩種方式之後，我發現 Svelte 更像是一種更接近 JavaScript 的語法。 有一件事我們需要注意到，這很容易學到：在更改值時，我們也必須進行賦值。 對於像字符串和數字這樣的簡單值，這通常是理所當然的，因為字符串的所有方法都返回新的字符串，數字也是如此 - 它們是不可變的。 但是對於數組呢？我們不能使用修改數組的方法，比如 push()、pop()、shift()、splice()…，因為沒有賦值的操作。它們改變了內部的數據結構，但是 Svelte 無法檢測到這一點。 嗯，你仍然可以使用它們，但是在進行操作之後，你需要將變量重新賦值給它自身，像這樣： let list = [1, 2, 3] list....

了解JavaScript Object物件的preventExtensions()方法 JavaScript的preventExtensions()方法是Object物件中的一種方法，它接受一個物件作為參數，並返回相同的物件。傳遞的物件會被改變，成為一個不接受新屬性的物件。無法添加新的屬性，但可以刪除現有的屬性，並且可以更改現有的屬性。 範例： const dog = {} dog.breed = 'Siberian Husky' Object.preventExtensions(dog) dog.name = 'Roger' //TypeError: Cannot add property name, object is not extensible 傳遞的參數也會作為參數返回，因此dog === myDog（它們是同一個物件）。 我們無法添加新的屬性，但可以刪除現有的屬性： const dog = {} dog.breed = 'Siberian Husky' dog.name = 'Roger' Object.preventExtensions(dog) delete dog.name dog //{ breed: 'Siberian Husky' }

瞭解JavaScript中的toExponential()方法 你可以使用這個方法來取得一個以指數表示的數字字串： new Number(10).toExponential() //1e+1 (= 1 \* 10^1) new Number(21.2).toExponential() //2.12e+1 (= 2.12 \* 10^1) 你可以傳遞一個參數來指定小數部分的位數： new Number(21.2).toExponential(1) //2.1e+1 new Number(21.2).toExponential(5) //2.12000e+1 請注意在第一個例子中我們失去了精度。

了解JavaScript字符串的toLocaleLowerCase()方法 根據地區的大小寫映射，返回原始字符串轉換為小寫的新字符串。 第一個參數表示地區，但它是可選的（如果省略，則使用當前地區）： 'Testing'.toLocaleLowerCase() //'testing' 'Testing'.toLocaleLowerCase('it') //'testing' 'Testing'.toLocaleLowerCase('tr') //'testing' 和國際化一樣，我們可能無法認識到它的好處，但根據MDN上的說明，土耳其語的大小寫映射不同於其他語言。 與toLowerCase()方法相似，但不考慮地區。

了解 JavaScript 的 toLocaleString() 方法 根據不同的地區設定格式化一個數字。 預設地區是美國英語： new Number(21.2).toLocaleString() // 21.2 可以將地區作為第一個參數傳入： new Number(21.2).toLocaleString('it') // 21,2 這是東部阿拉伯語： new Number(21.2).toLocaleString('ar-EG') // ٢١٫٢ 還有其他一些選項可以添加，建議查看 MDN 的頁面 以了解更多。

了解 JavaScript 字符串的 toString() 方法。 返回值 返回当前 String 对象的字符串表示： const str = new String('Test') str.toString() //'Test' 这与 valueOf() 方法一样。

這篇文章將介紹 JavaScript 中的 Number toString() 方法。 方法概述 toString() 方法用於將 Number 物件轉換成字串表示。此方法可以接受一個可選的參數來設定進位制。 使用方法 以下是一些使用 toString() 方法的示例： new Number(10).toString() //10 new Number(10).toString(2) //1010 new Number(10).toString(8) //12 new Number(10).toString(16) //a 這些示例展示了將數字 10 轉換為不同進位制的字串表示。不帶參數的情況下，toString() 方法將返回數字的十進位制字串表示。如果指定了參數，則方法將根據參數指定的進位制返回字串表示。 示例解釋 new Number(10).toString() 將數字 10 轉換為十進位制字串表示，結果為 “10”。 new Number(10).toString(2) 將數字 10 轉換為二進位制字串表示，結果為 “1010”。 new Number(10).toString(8) 將數字 10 轉換為八進位制字串表示，結果為 “12”。 new Number(10).toString(16) 將數字 10 轉換為十六進位制字串表示，結果為 “a”。 總結 toString() 方法是將 JavaScript Number 物件轉換為字串表示的常用方法。通過指定適當的進位制參數，我們可以以不同的進位制來表示數字。

＃觸控事件 學習如何在 JavaScript 中處理觸控事件的基本知識。 更多 JavaScript 事件資訊，請參閱JavaScript 事件 觸控事件是在行動裝置（如智能手機或平板電腦）上瀏覽網頁時觸發的事件。 它們允許您追蹤多點觸控事件。 我們有四種觸控事件： touchstart：觸控事件開始（觸碰表面） touchend：觸控事件結束（觸碰結束） touchmove：手指（或其他碰觸裝置的物體）在表面上移動 touchcancel：觸控事件被取消 每次觸控事件發生時，我們都會收到一個觸控事件： const link = document.getElementById('my-link') link.addEventListener('touchstart', event => { // 觸控事件開始 }) 以下是我們可以在該事件上訪問的所有屬性： identifier：此特定事件的唯一識別符。用於追蹤多點觸控事件。同一根手指=相同的識別符。 clientX / clientY：滑鼠指標相對於瀏覽器視窗的 x 和 y 座標，不考慮捲動。 screenX / screenY：滑鼠指標在螢幕座標中的 x 和 y 座標。 pageX / pageY：滑鼠指標在頁面座標中的 x 和 y 座標（包括捲動）。 target：被觸碰的元素。

找出關於JavaScript物件的valueOf()方法的所有資訊。 在物件實例上調用時，返回其基本值。 const person = { name: 'Fred' } person.valueOf() //{ name: 'Fred' } 這個方法通常只在JavaScript內部使用，很少在使用者代碼中實際被呼叫。