Hướng dẫn javascript build url from object - javascript xây dựng url từ đối tượng

Lớp URL tích hợp cung cấp giao diện thuận tiện để tạo và phân tích các URL.

Không có phương pháp kết nối mạng đòi hỏi chính xác đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2, chuỗi là đủ tốt. Vì vậy, về mặt kỹ thuật, chúng tôi không thể sử dụng
let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2. Nhưng đôi khi nó có thể thực sự hữu ích.

Tạo một URL

Cú pháp để tạo một đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 mới:

  • let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    5 - Đường dẫn URL đầy đủ hoặc duy nhất (nếu cơ sở được đặt, xem bên dưới),
    – the full URL or only path (if base is set, see below),
  • let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    6 - Một URL cơ sở tùy chọn: Nếu đối số được đặt và
    let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    5 chỉ có đường dẫn, thì URL được tạo liên quan đến
    let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    6.
    – an optional base URL: if set and
    let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    5 argument has only path, then the URL is generated relative to
    let url1 = new URL('https://javascript.info/profile/admin');
    let url2 = new URL('/profile/admin', 'https://javascript.info');
    
    alert(url1); // https://javascript.info/profile/admin
    alert(url2); // https://javascript.info/profile/admin
    6.

Ví dụ:

let url = new URL('https://javascript.info/profile/admin');

Hai URL này giống nhau:

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin

Chúng ta có thể dễ dàng tạo một URL mới dựa trên đường dẫn so với URL hiện có:

let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);

alert(newUrl); // https://javascript.info/profile/tester

Đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 ngay lập tức cho phép chúng tôi truy cập các thành phần của nó, vì vậy, đó là một cách hay để phân tích URL, ví dụ:

let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url

Tại đây, các thành phần gian lận cho các thành phần URL:

  • let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    0 là URL đầy đủ, giống như
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    1
  • let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    2 kết thúc với ký tự đại tràng
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    3
  • let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    4 - Một chuỗi tham số, bắt đầu với dấu hỏi
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    5
  • let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    6 bắt đầu với ký tự băm
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    7
  • Cũng có thể có các thuộc tính
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    8 và
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    9 nếu xác thực HTTP:
    let url = new URL('https://javascript.info/url');
    
    alert(url.protocol); // https:
    alert(url.host);     // javascript.info
    alert(url.pathname); // /url
    0 (không được sơn ở trên, hiếm khi được sử dụng).

Chúng ta có thể chuyển các đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 cho các phương thức mạng (và hầu hết các phương thức khác) thay vì một chuỗi

Chúng ta có thể sử dụng đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 trong
let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url
3 hoặc
let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url
4, hầu như mọi nơi có chuỗi URL được mong đợi.

Nói chung, đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 có thể được chuyển đến bất kỳ phương thức nào thay vì chuỗi, vì hầu hết các phương thức sẽ thực hiện chuyển đổi chuỗi, biến đối tượng
let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 thành một chuỗi có URL đầy đủ.

SearchParams?

Ví dụ, hãy nói rằng chúng tôi muốn tạo một URL với các thông số tìm kiếm đã cho, ví dụ,

let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url
7.

Chúng tôi có thể cung cấp chúng trong chuỗi URL:

new URL('https://google.com/search?query=JavaScript')

Nhưng các tham số cần được mã hóa nếu chúng chứa khoảng trắng, các chữ cái không latin, v.v. (thêm về điều đó bên dưới).

Vì vậy, có một thuộc tính URL cho điều đó:

let url = new URL('https://javascript.info/url');

alert(url.protocol); // https:
alert(url.host);     // javascript.info
alert(url.pathname); // /url
8, một đối tượng của loại URLSearchParams.

Nó cung cấp các phương thức thuận tiện cho các tham số tìm kiếm:

  • let url = new URL('https://javascript.info/url');
    
    alert(url.protocol); // https:
    alert(url.host);     // javascript.info
    alert(url.pathname); // /url
    9 - Thêm tham số bằng
    new URL('https://google.com/search?query=JavaScript')
    0,
    – add the parameter by
    new URL('https://google.com/search?query=JavaScript')
    0,
  • new URL('https://google.com/search?query=JavaScript')
    1 - Xóa tham số bằng
    new URL('https://google.com/search?query=JavaScript')
    0,
    – remove the parameter by
    new URL('https://google.com/search?query=JavaScript')
    0,
  • new URL('https://google.com/search?query=JavaScript')
    3 - Nhận tham số bằng
    new URL('https://google.com/search?query=JavaScript')
    0,
    – get the parameter by
    new URL('https://google.com/search?query=JavaScript')
    0,
  • new URL('https://google.com/search?query=JavaScript')
    5 - Nhận tất cả các tham số có cùng
    new URL('https://google.com/search?query=JavaScript')
    0 (điều đó có thể, ví dụ:
    new URL('https://google.com/search?query=JavaScript')
    7),
    – get all parameters with the same
    new URL('https://google.com/search?query=JavaScript')
    0 (that’s possible, e.g.
    new URL('https://google.com/search?query=JavaScript')
    7),
  • new URL('https://google.com/search?query=JavaScript')
    8 - Kiểm tra sự tồn tại của tham số bằng
    new URL('https://google.com/search?query=JavaScript')
    0,
    – check for the existence of the parameter by
    new URL('https://google.com/search?query=JavaScript')
    0,
  • let url = new URL('https://google.com/search');
    
    url.searchParams.set('q', 'test me!'); // added parameter with a space and !
    
    alert(url); // https://google.com/search?q=test+me%21
    
    url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :
    
    // parameters are automatically encoded
    alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
    
    // iterate over search parameters (decoded)
    for(let [name, value] of url.searchParams) {
      alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
    }
    0 - Đặt/thay thế tham số,
    – set/replace the parameter,
  • let url = new URL('https://google.com/search');
    
    url.searchParams.set('q', 'test me!'); // added parameter with a space and !
    
    alert(url); // https://google.com/search?q=test+me%21
    
    url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :
    
    // parameters are automatically encoded
    alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
    
    // iterate over search parameters (decoded)
    for(let [name, value] of url.searchParams) {
      alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
    }
    1 - Sắp xếp các tham số theo tên, hiếm khi cần thiết,
    – sort parameters by name, rarely needed,
  • Càng và nó cũng có thể lặp lại, tương tự như
    let url = new URL('https://google.com/search');
    
    url.searchParams.set('q', 'test me!'); // added parameter with a space and !
    
    alert(url); // https://google.com/search?q=test+me%21
    
    url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :
    
    // parameters are automatically encoded
    alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
    
    // iterate over search parameters (decoded)
    for(let [name, value] of url.searchParams) {
      alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
    }
    2.

Một ví dụ với các tham số chứa khoảng trắng và dấu chấm câu:

let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}

Mã hóa

Có một RFC3986 tiêu chuẩn xác định các ký tự nào được phép trong URL và loại nào không.

Những thứ không được phép, phải được mã hóa, ví dụ như các chữ cái và không gian không latin-được thay thế bằng mã UTF-8 của chúng, được đặt trước bởi

let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}
3, chẳng hạn như
let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}
4 (một không gian có thể được mã hóa bởi
let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}
5, vì lý do lịch sử, nhưng đó là một không gian ngoại lệ).

Tin tốt là các đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 tự động xử lý tất cả. Chúng tôi chỉ cung cấp tất cả các tham số không được mã hóa, sau đó chuyển đổi
let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 thành chuỗi:

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A

Như bạn có thể thấy, cả

let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}
8 trong đường dẫn URL và
let url = new URL('https://google.com/search');

url.searchParams.set('q', 'test me!'); // added parameter with a space and !

alert(url); // https://google.com/search?q=test+me%21

url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :

// parameters are automatically encoded
alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay

// iterate over search parameters (decoded)
for(let [name, value] of url.searchParams) {
  alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
}
9 trong tham số được mã hóa.

URL trở nên dài hơn, bởi vì mỗi chữ cái cyrillic được đại diện với hai byte trong UTF-8, do đó có hai thực thể

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
0.

Chuỗi mã hóa

Vào thời xưa, trước khi các đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 xuất hiện, mọi người đã sử dụng các chuỗi cho URL.

Đến bây giờ, các đối tượng

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2 thường thuận tiện hơn, nhưng các chuỗi vẫn có thể được sử dụng. Trong nhiều trường hợp sử dụng một chuỗi làm cho mã ngắn hơn.

Nếu chúng ta sử dụng một chuỗi mặc dù, chúng ta cần mã hóa/giải mã các ký tự đặc biệt theo cách thủ công.

Có các chức năng tích hợp cho điều đó:

  • ENCODEURI - mã hóa URL nói chung.
  • DecodeUri - giải mã nó trở lại.
  • Encodeuricomponent - mã hóa thành phần URL, chẳng hạn như tham số tìm kiếm hoặc băm hoặc tên đường dẫn.
  • Decodeuricomponent - giải mã nó trở lại.

Một câu hỏi tự nhiên là: Những gì mà sự khác biệt giữa

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
3 và
// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
4? Khi nào chúng ta nên sử dụng? ”

Điều đó dễ hiểu nếu chúng ta nhìn vào URL, mà chia thành các thành phần trong hình trên:

https://site.com:8080/path/page?p1=v1&p2=v2#hash

Như chúng ta có thể thấy, các ký tự như

let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);

alert(newUrl); // https://javascript.info/profile/tester
3,
let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);

alert(newUrl); // https://javascript.info/profile/tester
5,
// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
7,
// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
8,
let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);

alert(newUrl); // https://javascript.info/profile/tester
7 được cho phép trong URL.

Mặt khác, nếu chúng ta nhìn vào một thành phần URL duy nhất, chẳng hạn như tham số tìm kiếm, các ký tự này phải được mã hóa, không phá vỡ định dạng.

  • // using some cyrillic characters for this example
    
    let url = new URL('https://ru.wikipedia.org/wiki/Тест');
    
    url.searchParams.set('key', 'ъ');
    alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
    4 chỉ mã hóa các ký tự hoàn toàn bị cấm trong URL.
  • // using some cyrillic characters for this example
    
    let url = new URL('https://ru.wikipedia.org/wiki/Тест');
    
    url.searchParams.set('key', 'ъ');
    alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
    3 mã hóa cùng một ký tự, và, ngoài chúng, các ký tự
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    7,
    https://site.com:8080/path/page?p1=v1&p2=v2#hash
    3,
    // using some cyrillic characters for this example
    
    let url = new URL('https://ru.wikipedia.org/wiki/Тест');
    
    url.searchParams.set('key', 'ъ');
    alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
    8,
    let url = new URL('https://google.com/search');
    
    url.searchParams.set('q', 'test me!'); // added parameter with a space and !
    
    alert(url); // https://google.com/search?q=test+me%21
    
    url.searchParams.set('tbs', 'qdr:y'); // added parameter with a colon :
    
    // parameters are automatically encoded
    alert(url); // https://google.com/search?q=test+me%21&tbs=qdr%3Ay
    
    // iterate over search parameters (decoded)
    for(let [name, value] of url.searchParams) {
      alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
    }
    5,
    https://site.com:8080/path/page?p1=v1&p2=v2#hash
    6,
    https://site.com:8080/path/page?p1=v1&p2=v2#hash
    7,
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    3,
    https://site.com:8080/path/page?p1=v1&p2=v2#hash
    9,
    // using some cyrillic characters for this example
    
    let url = new URL('https://ru.wikipedia.org/wiki/Тест');
    
    url.searchParams.set('key', 'ъ');
    alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
    7,
    let url = new URL('https://javascript.info/profile/admin');
    let newUrl = new URL('tester', url);
    
    alert(newUrl); // https://javascript.info/profile/tester
    5 và ____.

Vì vậy, đối với toàn bộ URL, chúng ta có thể sử dụng

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
4:

// using cyrillic characters in url path
let url = encodeURI('http://site.com/привет');

alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82

Thay vào đó, trong khi đối với các tham số URL, chúng ta nên sử dụng

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
3 thay thế: thay vào đó:

let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll

So sánh nó với

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
4:

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
0

Như chúng ta có thể thấy,

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
4 không mã hóa
// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
8, vì đây là một ký tự hợp pháp trong toàn bộ URL.

Nhưng chúng ta nên mã hóa

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
8 bên trong tham số tìm kiếm, nếu không, chúng ta sẽ nhận được
// using cyrillic characters in url path
let url = encodeURI('http://site.com/привет');

alert(url); // http://site.com/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82
9 - đó thực sự là
let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll
0 cộng với một số tham số tối nghĩa
let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll
1. Không như dự định.

Vì vậy, chúng ta chỉ nên sử dụng

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
3 cho mỗi tham số tìm kiếm, để chèn chính xác nó vào chuỗi URL. Điều an toàn nhất là mã hóa cả tên và giá trị, trừ khi chúng tôi hoàn toàn chắc chắn rằng nó chỉ cho phép các ký tự.

Sự khác biệt mã hóa so với

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
2

Các lớp URL và URLSearchParams dựa trên đặc tả URI mới nhất: RFC3986, trong khi các chức năng

let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll
4 dựa trên phiên bản lỗi thời RFC2396.

Có một vài sự khác biệt, ví dụ: Địa chỉ IPv6 được mã hóa khác nhau:

let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');

alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
1

Như chúng ta có thể thấy,

// using some cyrillic characters for this example

let url = new URL('https://ru.wikipedia.org/wiki/Тест');

url.searchParams.set('key', 'ъ');
alert(url); //https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D1%81%D1%82?key=%D1%8A
4 đã thay thế dấu ngoặc vuông
let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll
6, điều đó không chính xác, lý do là: URL IPv6 không tồn tại tại thời điểm RFC2396 (tháng 8 năm 1998).

Những trường hợp như vậy là rất hiếm, các chức năng

let music = encodeURIComponent('Rock&Roll');

let url = `https://google.com/search?q=${music}`;
alert(url); // https://google.com/search?q=Rock%26Roll
4 hoạt động tốt hầu hết thời gian.

Làm thế nào để bạn tạo một URL trong JavaScript?

Cú pháp để tạo một đối tượng URL mới:..
URL mới (url, [cơ sở]).
Đặt url = url mới ('https://javascript.info/profile/admin') ;.
URL mới ('https://google.com/search? Truy vấn = javaScript').

Một cách để xây dựng một URL với một số tham số truy vấn là gì?

Cách xây dựng một URL và các tham số tìm kiếm của nó với JavaScript..
const myurl = url mới ("https://www.valentinog.com");....
const myurl = url mới ("www.valentinog.com");// typeerror: www.valentinog.com không phải là một URL hợp lệ.....
const otherUrl = url mới ("https: // w");....
const khácBảng điều khiển ..

Tôi có thể sử dụng url createdObjecturl không?

DEPENTATED. Không được sử dụng trong các trang web mới. Not for use in new websites.

URL đối tượng là gì?

URL đối tượng là các URL trỏ đến các tệp trên đĩa.Ví dụ, giả sử rằng bạn muốn hiển thị hình ảnh từ hệ thống người dùng trên trang web.URLs that point to files on disk. Suppose, for example, that you want to display an image from the user's system on a web page.