JavaScript による URL 関連コンテンツの紹介 (コード付き)

この記事では、JavaScript での URL の概要 (コード付き) を紹介します。これには一定の参考価値があります。困っている友人は参照してください。お役に立てば幸いです。

Xiaosi は、WeChat メッセージ プロンプトとともに、ページ データをリクエストできない理由がわからないというコードを送信しました。

axios.get('users', {
    params: { ids: [1, 2, 3] }
})

Xiaoer は、それが原因である可能性が高いことを認識しました。 query. の配列転送メソッドによる、配列 id:[5, 6, 100] の解析のバックエンド実装により、次のメソッドが存在する可能性があります:

bracket: ids[]=1&ids[] =2&ids[]=3
index: ids [0]=1&ids[1]=2&ids[3]=3
comma: ids=1,2,3
none: ids=1&ids=2&ids= 3

それぞれ 4 つのテストの後、問題は解決されました。シャオ アーさんは、ブラザー リトル パンダも開発中にこの問題に遭遇したことを思い出しました。オンラインで検索したところ、他の人が stringify 直接コードを使用していることがわかりました。 qs ライブラリを試してみましたが、エラーはありませんでした。それがどのように機能するかは関係なく、それが何であるかは、今考えると恐ろしいです。

私たちは毎日 URL を扱っていますが、誰もが URL を理解しているわけではありません。

コードが実行できる理由を誰もが詳しく調べようとするわけではありません。

元の形式に戻る

URL() オブジェクトを使用して、URL アドレスを元の形式にすばやく戻します:

Script

const url = new URL('http://www.pushme.top/users?sort_by=asc#page=userlist')
console.log(url)

Output

{
    hash: "#page=userlist"
    host: "www.pushme.top"
    hostname: "www.pushme.top"
    href: "http://www.pushme.top/users?sort_by=asc#page=userlist"
    origin: "http://www.pushme.top"
    password: ""
    pathname: "/users"
    port: ""
    protocol: "http:"
    search: "?sort_by=asc"
    searchParams: URLSearchParams {}
    username: ""
}

小さな URL アドレスにこれほど多くの属性があるとは思いませんでした。ここでは主にハッシュと検索について説明します。

読んでいるときに上下に見る必要がないように、コンソールを開いてスクリプトを実行することをお勧めします。

ホストとホスト名

目の鋭い学生なら、ホストとホスト名がまったく同じであることに気づいたはずですが、これはなぜでしょうか?

開発中によく見られる localhost:8080 を思い出してください。ここにはポート番号 8080 が表示されていますが、通常、いくつかの Web サイトにアクセスするとき、ポート番号は表示されません。これは、URL アドレスのデフォルトのポート番号が 80 であるためです。よく見ると、上記のポートの値が空であることがわかります。

ホストとホスト名の違いは、ポートがある場合、ホストにはポート番号が含まれますが、ホスト名には含まれないことです。

プロトコルとオリジン

プロトコルはプロトコルを指します。最も一般的なものは http と https です。もちろん、プロトコルを入力しなくてもブラウザが自動的に追加します。しかし、URL() ではそうではありません。同意書を持参すると、エラーが発生します。 Origin はプロトコルとホストで構成されます。

search と searchParams

Basics

?search=a クエリは最初の ? で始まり、行末または # で終わります。バックエンドにデータを渡すために使用されます。データは & で区切られ、値は = で区切られます。コードを通して理解してみましょう:

const query = 'id=1&sort=asc&hello=world';
// 对 & 分割取得数据对
const data = query.split('&').reduce((data,keyValue) => {
    const [ key, value ] = keyValue.split('=');
    return (data[key] = value, data);
}, {});

// 输出 {id: "1", sort: "asc", hello: "world"}
console.log(data);

これは、クエリ内のデータ ペアの最も基本的な組み合わせです。もちろん、最初の 4 つの配列式には追加の処理が必要ですが、これは単なるコレクションとコレクションにすぎません。キーの値判定ただし、この部分は基本的にバックエンド フレームワークによって処理されますが、フロントエンドは qs、query-string、qss などのライブラリを使用して完成させることもできます。

余談: これらのライブラリにはコードが非常に少ないため、読む価値があり、何か新しいことが得られるかもしれません。

プラス記号とスペース

毎日使用している Baidu と Google のこれらの詳細に注意を払っているかどうかはわかりません:

https:// と入力してください。 www.baidu. com/s?wd=Xiaoer Pushmetop 検索ボックスに表示されるのは Xiaoer Pushmetop で、アドレス バーの URL アドレスが魔法のようにスペースに変わります。
https://www.baidu.com/s?wd=小二 Pushmetop と入力すると、検索ボックスに「Xiaoer Pushmetop」と表示され、アドレス バーの URL アドレスのスペースが に変わります。
https://www.baidu.com/s?wd=小二+pushmetopと入力すると、検索ボックスにXiaoer Pushmetopが表示され、アドレスバーのURLアドレスの+が になります。

具体的な理由については、予約文字のパーセント エンコーディングについては Wikipedia を確認してください。

URL エンコード

Nuggets などの Web サイト上のリンクをクリックすると、http://www.pushmetop.com?redirect=xxxxx のような URL アドレスがすぐに表示され、リダイレクトが見つかります。リダイレクトに相当 アドレスが%文字化けの塊になってしまいますが、これはなぜでしょうか？

ジャンプする必要があるリンクが www.test.com?hello=world&id=1 であると仮定します。リンク全体を結合すると、次のようになります:

http://www.pushmetop.com?redirect=www.test.com?hello=world&id=1

最初の定義によると 解析値 と 期待値 はまったく異なります。

解析値

{
    "redirect": "www.test.com?hello=world",
    "id": "1"
}

期待値

{
    "redirect": "www.test.com?hello=world&id=1"
}

これを解決するには問題を解決するためのエンコーディング:

encodeURIComponent() と decodeURIComponent() が推奨されます。

encodeURI() と decodeURI() を比較すると、前者は文字「; / ? : @ & = $ , #」をエンコードしません。

escape() と unescape() は推奨されません。 ＃＃＃＃＃＃例＃＃＃

let redirect = 'www.test.com?hello=world&id=1';
redirect = encodeURIComponent(redirect);

let url = `http://www.pushmetop.com?redirect=${redirect}`;
url = new URL(url)

// 输出: www.test.com?hello=world&id=1
console.log(url.searchParams.get('redirect'))

hash

#hash 中 fragment 以 # 为开始 行尾 为结束。在 回到顶部 中有提到过利用hash锚点来进行跳转，如果大家注意观察的话会发现 hash 的改变不会引起页面的刷新。

在 Angular.js、Vue Router 等库中，会利用在 html5 中提供了 history 的一系列操作，来帮助我们不刷新页面管理  url。但是在一些旧的浏览器上并不兼容时，会利用 hash 不会主动触发浏览器 reload 的特性来修改 location.hash 来管理路由。 当然 hash 的另外一个特点是可以被保存为书签，也是一大优点。

hash 的小妙用也可以像 query 那样利用 & 和 = 来存取数据，当然你也可以定制属于你的规则。

href 和 pathname

href 为整个 url地址。而 pathname 属性包含 URL 的整个路径部分。它跟在 host （包括 port）后面，排在 query 或 hash 组成部分的前面且被 ASCII 问号（?）或哈希字符（#）分隔。

username 和 password

username 和 password 在日常使用中很少用，它们可以合称为 auth。该字符串跟在 protocol 和双斜杠（如果有）的后面，排在 host 部分的前面且被一个 ASCII 的 at 符号（@）分隔：

http://username:password@www.pushme.top/test/blah?something=123

结尾

本来只是想讨论 hash 和 search ，结果全都过一遍，今天就辛苦大家了。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目！

以上がJavaScript による URL 関連コンテンツの紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。