JavaScript >> Javascript 文檔 >  >> Tags >> string

在 JavaScript 中生成隨機數和字符串 [示例]

本指南將向您展示如何在 JavaScript 編程語言中快速輕鬆地生成隨機數和字符串。

在編寫幾乎任何中等複雜度的應用程序時,生成隨機值是一項常見且重要的任務。

隨機字符串和數字用於生成唯一標識符(例如,用於 URL 縮短服務中的短 URL),用於識別數據庫中的唯一記錄,並且(最重要的是)經常用於確定視頻遊戲中游戲元素的行為(例如,模擬擲硬幣,或生成隨機地形)。

在 JavaScript 中使用 Math.random() 生成隨機數

JavaScript Math.random() 函數返回一個介於 0 和 1 之間的隨機浮點數。超級好用:

var myRandomNumber = Math.random(); // A value between 0 and 1

但是如果你想要一個整數呢?將它與 Math.floor() 結合使用 函數,將數字向下舍入到最接近的整數,然後將隨機數乘以您希望接收的最大數字:

var myRandomInteger = Math.floor(Math.random() * 15);

上面的例子會將一個 0-15 的隨機整數賦給 myRandomInteger 變量。

這個概念可以擴展得到任意兩個值之間的隨機整數值:

function getRandomInteger(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
}

可以這樣使用:

var myRandomInteger = getRandomInteger(2, 18);

這將返回一個介於 2 和 18 之間的隨機整數。

想要得到 min 之間的浮點數 和 最大 ?刪除最後的 Math.floor() 阻止結果被四捨五入到最接近的整數。

對於更多種類的隨機數,您可以使用 Math.Random() 生成,查看 Mozilla Developer 文檔。

在 JavaScript 中生成隨機字符串

沒有內置的 JavaScript 方法來生成隨機字符串,所以這裡有一個簡潔的 DIY 解決方案:

function randomString(minChars, maxChars) {
    Math.random().toString(36).substr(minChars, maxChars);
}

那麼這裡發生了什麼?

  • Math.random() 被調用
  • 使用帶有 radix 的 toString() 將結果轉換為字符串 36
    • 保持簡單,基數 將由數字表示的隨機值轉換為具有高基數的值 其中隨機數由字母表示
  • 然後使用 substr() 修剪所有結果 將字符串切割成必要的長度
  • 如果 Math.random() 則返回空字符串的可能性微乎其微 返回 0
    • 因為我們是一個教學網站,所以我使用了這個示例,因為它很容易解釋它為什麼會這樣做
    • 在 StackOverflow 上查看此答案,了解此問題的討論和解決方案

這個函數可以這樣使用:

var myRandomString = randomString(2,6);

上面的例子會生成一個長度在 2 到 6 個字符之間的隨機字符串。

安全警告!

使用上述代碼生成的所有隨機值都被視為偽隨機, 足夠隨機以供一般使用,但不是 在散列密碼或生成安全密碼時足夠隨機以防彈安全。

如果您想使用隨機數據保護您的應用程序 - 您必須使用適當的加密庫。

更好 - 只是不要。相反,請使用預構建的身份驗證或加密庫。使用您在網上找到的教程滾動您自己的身份驗證和加密服務是讓您的數據受到損害的好方法。只需集成專業人士制定的解決方案即可 - 您將節省時間並減少後顧之憂。


Tutorial JavaScript 教程
  1. 吉卜力工作室觀察名單

  2. 函數範圍與塊範圍

  3. 為什麼應該避免對計算屬性使用狀態

  4. 基於位置的 TODO 應用程序

  5. 使用javascript打開彈出窗口

  6. Javascript 中的橢圓、三個點、... 或三個句點 — 展開運算符入門

  7. 你好,#30DaysOfPlaywright

  1. React 的 UseState 和 UseEffect Hooks

  2. 使用 Javascript map() 函數返回 JSON 對象的子集

  3. 我第一次使用#JavaScriptmas 挑戰代碼!

  4. 了解 TypeScript 並在您的節點環境中使用它。

  5. 無服務器上的通用應用程序?是的。

  6. 在打字稿中將類類型的對像從一個文件導入另一個文件

  7. 使用 Intersection Observer 創建一個 Web 組件以延遲加載圖像

  1. 反應 ts 啟動器

  2. 如何在 Google Chrome 的內聯 Javascript 中設置斷點?

  3. ReactJS Giphy API 教程

  4. 將 React 包發佈到 npm 的完整指南