JavaScript >> Javascript 文檔 >  >> Tags >> object

如何在 JavaScript 中使用 URL 對象

在 JavaScript 中,URL 接口用於解析、構造、規範化和編碼 URL。它提供靜態方法和屬性來讀取和修改 URL 的不同組件。

創建一個 URL 對象

你可以新建一個URL 對象通過傳遞字符串 URL 或通過向其構造函數提供相對路徑和基本字符串 URL:

// URL object with absolute path
const url1 = new URL('https://attacomsian.com/blog/javascript-url-object')

// URL object with relative path and base URL
const url2 = new URL('/blog/javascript-url-object', 'https://attacomsian.com')

在上面的示例中,兩個 URL 是相同的。我們甚至可以根據相對於現有 URL 的路徑創建一個新 URL:

const url3 = new URL('/blog', url1)
console.log(url3.toString()) 
// https://atttacomsian.com/blog

網址屬性

URL 如果您想從字符串 URL 中提取不同的部分,例如主機名、端口、相對路徑和參數值,object 很有用。您可以在 URL 之後立即訪問這些屬性 對像已創建:

const url = new URL('https://attacomsian.com/blog/javascript-url-object#url-properties')

console.log(url.protocol) // https:
console.log(url.host) // attacomsian.com
console.log(url.pathname) // /blog/javascript-url-object
console.log(url.hash) // #url-properties
console.log(url.origin) // https://attacomsian.com

除了上述屬性之外,URL 對像也有:

  • search — 包含前導 ? 的查詢參數字符串 字符。
  • href — 完整的 URL,同 url.toString() 方法。
  • port — 返回 URL 的端口。
  • searchParams ——一個URLSearchParams 對像以訪問 search 中的各個查詢參數 .
  • username &password — 僅在使用 HTTP 身份驗證時可用。

除了上述屬性,URL object 還提供了兩種方法:

  • toString() — 類似於 url.href 但不能用於修改值。
  • toJSON() — 它返回與 href 相同的字符串 財產。

更新一個 URL 對象

URL 對象屬性(origin 除外 和 searchParams ) 可用於構造新 URL 或更新現有 URL 的部分內容:

// construct a URL
const url = new URL('http://attacomsian.com')
url.pathname = '/blog/javascript-url-object'
url.hash = '#url-properties'

// update `protocol` property
url.protocol = 'https:'

console.log(url.toString())
// https://attacomsian.com/blog/javascript-url-object#url-properties

靜態方法

URL 接口提供了一個createObjectURL() 生成 blob URL 的靜態方法(以 blob: 開頭 作為其架構)在瀏覽器中唯一標識對象:

const blobUrl = URL.createObjectURL(blob)

獲得 blob URL 後,將其傳遞給 revokeObjectURL() 將其從內存中刪除的靜態方法:

URL.revokeObjectURL(blobUrl)

URL 對象使用

目前,URL 對象的使用是有限的。簡單的字符串足以發出網絡請求。但是,您可以使用 URL 現代 JavaScript API(如 Fetch API)甚至 XMLHttpRequest (XHR) 中的對像以與服務器通信。

這是使用 URL 的 Fetch API 示例 object 獲取 JSON 對象:

const url = new URL('https://reqres.in/api/users')

fetch(url)
  .then(res => res.json())
  .then(res => {
    res.data.map(user => {
      console.log(`${user.id}: ${user.first_name} ${user.last_name}`)
    })
  })

Tutorial JavaScript 教程
  1. 問題四:深入解析call and apply原理、使用場景及實現

  2. 從 BE 中為 FE 挽救 GraphQL 枚舉 ⚓️

  3. 打字稿類型聲明

  4. JS 基礎知識:JavaScript 的基本概述

  5. Javascript 中的 noop

  6. 為什麼我們會得到那個愚蠢的 CORS 錯誤?

  7. 僅來自 DataAttributes 的 Jquery 延遲加載選項卡

  1. JS 曲線文本生成器

  2. 使用 ReactJS、Spring Boot 和 MongoDB 構建社交網絡應用

  3. JavaScript 初學者幫助

  4. 羅馬轉整數

  5. 使用 Pose 為您的 React 應用程序製作動畫

  6. 使用 React 和 Node js 的 Web 推送通知

  7. 命名事物是困難的。同意還是不同意?

  1. 衡量績效

  2. 如何在 Vue.js 上使用 mixins

  3. Next 帶有 TypeScript 和 Tailwind CSS 的 JS Starter Boilerplate ⚡️

  4. 5個時髦的jQuery進度條插件