URL セグメントの結合

JavaScriptJavaScriptBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、JavaScript を使って URL セグメントを結合し、結果の URL を正規化する方法を探ります。この実験では、二重スラッシュを削除し、プロトコルに適切なスラッシュを追加し、パラメータの前のスラッシュを削除し、パラメータを '&' で結合し、最初のパラメータ区切り文字を正規化するためにさまざまな正規表現を使用するプロセスを案内します。この実験が終了すると、JavaScript を使って効率的に URL セグメントを結合して正規化できるようになります。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28456{{"URL セグメントの結合"}} javascript/data_types -.-> lab-28456{{"URL セグメントの結合"}} javascript/arith_ops -.-> lab-28456{{"URL セグメントの結合"}} javascript/comp_ops -.-> lab-28456{{"URL セグメントの結合"}} javascript/spread_rest -.-> lab-28456{{"URL セグメントの結合"}} end

URL セグメントの結合と正規化

与えられた URL セグメントを結合し、結果の URL を正規化するには、以下の手順に従います。

  1. Array.prototype.join() を使って URL セグメントを結合します。
  2. 結果の URL を正規化するために、さまざまな正規表現を使った一連の String.prototype.replace() 呼び出しを行います。
    • 二重スラッシュを削除する
    • プロトコルに適切なスラッシュを追加する
    • パラメータの前のスラッシュを削除する
    • パラメータを '&' で結合し、最初のパラメータ区切り文字を正規化する

以下のコード スニペットを使って URL セグメントを結合して正規化します。

const URLJoin = (...args) =>
  args
    .join("/")
    .replace(/[\/]+/g, "/")
    .replace(/^(.+):\//, "$1://")
    .replace(/^file:/, "file:/")
    .replace(/\/(\?|&|#[^!])/g, "$1")
    .replace(/\?/g, "&")
    .replace("&", "?");

使用例:

URLJoin("http://www.google.com", "a", "/b/cd", "?foo=123", "?bar=foo");
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'

まとめ

おめでとうございます!あなたは URL セグメントの結合の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を練習できます。