我喜歡 JavaScript，因為它充滿驚喜，可以用於許多令人驚奇的事情。

許多開發人員喜歡它，但由於顯而易見的原因，許多開發人員仍然討厭它。

但沒有人可以否認 JavaScript 實在是太棒了。

那麼，讓我們看看使用 Vanilla JavaScript 可以做一些令人驚訝的事情。

我 200% 確信這份清單會讓您大吃一驚！

尋找作業系統詳細資訊。

您知道可以使用簡單的 JS 來尋找作業系統詳細資訊嗎？

window.navigator物件包含訪客瀏覽器作業系統詳細資訊的資訊。一些作業系統屬性可在平台屬性下找到。

您可以使用下面的程式碼片段來獲取詳細資訊。

console.log(navigator.platform);

使用 void(0) 防止頁面重新整理。

void(0)用於防止頁面重新整理。這將有助於消除不必要的影響，因為它將傳回未定義的原始值。

它通常用於使用錨元素的 HTML 文件中。

例如，當您按一下連結時，瀏覽器會載入新頁面或重新整理同一頁面。這不會發生。

例如，下面的連結會在不重新載入頁面的情況下發出警報。

<a href="JavaScript:void(0);" onclick="alert('Well done!')">
  Click Me!
</a>

重定向新頁面。

在普通 JavaScript 中，您可以透過設定location物件的href屬性（ window物件的屬性）將使用者重定向到新頁面。

文法如下：

function redirect() {
  window.location.href = "newPage.html";
}

當您呼叫重定向函數時，瀏覽器將導航至newPage.html 。

一點額外的解釋。

• window ：指瀏覽器視窗。

• location ：視窗物件的一個屬性，保存有關目前 URL 的資訊。

• href ：包含整個 URL 的位置物件的屬性。使用它，您可以更改 URL，從而使瀏覽器加載新頁面。

驗證電子郵件。

每當我想要驗證電子郵件時，我總是會尋找完美的片段。

您還會在庫中看到用於驗證電子郵件的預設函數，例如在 Zod 中。

以下程式碼片段驗證具有完整邏輯的任何電子郵件。

function validateEmail(email) {
  var re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

如果您想要一種更簡單且也接受 Unicode 字元的方法。可以用下面這個！

function validateEmailUnicode(email) {
  var re =
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(String(email).toLowerCase());
}

這個簡化版本匹配大多數有效的電子郵件地址，同時避免了過於複雜的正規表示式的一些陷阱。

取得目前 URL。

是的，只用 JavaScript 就可以實現！

您可以使用window.location.href取得目前 URL 並更新 URL。

console.log("location.href", window.location.href); // Returns full URL

您也可以將document.URL用於唯讀目的（不能用於導覽至新 URL），但此解決方案在 Firefox 中存在問題。

console.log("document.URL", document.URL); // Returns full URL (Read-only)

它可能無法在所有瀏覽器上一致地工作，尤其是舊版本的 Firefox（線上資源）。

因此， window.location.href通常更適合讀取和更新 URL。

使用正規表示式檢測行動瀏覽器。

您可以使用正規表示式，它會根據使用者是否使用行動裝置瀏覽而傳回 true 或 false 值。哇！

window.mobilecheck = function () {
  var mobileCheck = false;
  (function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        a.substr(0, 4)
      )
    )
      mobileCheck = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return mobileCheck;
};

我想知道世界上誰寫了這個片段:)

偵測沒有正規表示式的行動瀏覽器。

您只需執行裝置清單並檢查userAgent是否符合即可偵測行動瀏覽器。這是正規表示式使用的替代解決方案。

function detectmob() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true;
  } else {
    return false;
  }
}

這確實看起來更乾淨、更容易理解。

偵測頁面上禁用的 JavaScript。

您可以使用<noscript>標籤來偵測 JavaScript 是否已停用。

<noscript>內的程式碼區塊在 JavaScript 停用時執行，通常用於在 JavaScript 產生頁面時顯示替代內容。

<script type="javascript">
    // JS related code goes here
</script>
<noscript>
    <a href="next_page.html?noJS=true">JavaScript is disabled on the page. Enable it asap!</a>
</noscript>

獲取模組的元資料。

您可以使用import.meta物件，它是向 JavaScript 模組公開上下文特定元資料的元屬性。

它包含有關當前模組的訊息，例如模組的 URL。在瀏覽器中，您可能會獲得與 NodeJS 不同的元資料。

<script type="module" src="welcome-module.js"></script>;
console.log(import.meta); // { url: "file:///home/user/welcome-module.js" }

取得日期的時區偏移。

您可以使用日期物件的getTimezoneOffset方法。此方法傳回從目前區域設定（主機系統設定）到 UTC 的時區差異（以分鐘為單位）。

var offset = new Date().getTimezoneOffset();
console.log(offset); // -330

輸出

將遊標設定為等待。

在 JavaScript 中，可以使用名為cursor屬性將遊標設定為等待。讓我們使用以下函數來執行此操作。

function myFunction() {
  window.document.body.style.cursor = "wait";
}

您可以在頁面加載時使用它。

取得複選框的狀態。

您可以將選取的屬性套用至 DOM 中選定的複選框。如果值為 true，則表示該複選框已選中，否則表示未選中。

例如，可以使用 JavaScript 檢查以下 HTML 複選框元素，如下所示：

<input type="checkbox" id="checkboxname" value="Agree" /> Agree the
conditions<br />

console.log(document.getElementById(‘checkboxname’).checked); // true or false

將 CSS 新增到控制台訊息。

是的，您甚至可以將 CSS 樣式套用到類似於網頁上 HTML 文字的控制台訊息。真的很棒:)

console.log(
  "%c The text has a purple color, with large font and white background",
  "color: purple; font-size: x-large; background: white"
);

輸出。

注意：所有 CSS 樣式都可以套用於控制台訊息。

停用網頁上的右鍵。

透過從 body 元素上的oncontextmenu屬性傳回 false 可以停用頁面上的右鍵單擊。

<body oncontextmenu="return false;"></body>

捕獲瀏覽器後退按鈕。

起初，我甚至不相信這是可能的。

您可以使用beforeunload事件來完成此操作，該事件在視窗、文件及其資源即將被卸載時觸發。此事件有助於警告使用者遺失目前資料並偵測後退按鈕事件。

 window.addEventListener('beforeunload', () => {
   console.log('Clicked browser back button');
 });

對控制台輸出進行分組和嵌套。

console.group()可用於對相關日誌訊息進行分組，您可以使用console.groupEnd()來關閉群組。

您也可以嵌套群組，這允許您分層輸出訊息。

例如，如果您要記錄使用者的詳細資訊：

console.group("User Details");
console.log("name: Sudheer Jonna");
console.log("job: Software Developer");

// Nested Group
console.group("Address");
console.log("Street: Commonwealth");
console.log("City: Los Angeles");
console.log("State: California");

// Close nested group
console.groupEnd();

// Close outer group
console.groupEnd();

輸出。

如果您希望預設情況下折疊群組，您也可以使用console.groupCollapsed()而不是console.group() 。

哇！ JavaScript，你真的太棒了！

您在這裡找到足夠好的東西了嗎？請在評論中告訴我。

我正在為開發者和作家建立一個 Discord 社群。

請透過dub.sh/opensouls加入我們。

原文出處：https://dev.to/anmolbaranwal/15-amazing-things-you-can-do-with-simple-javascript-g88