Объект Browser Location, объект URL, анализ объекта URLSearchParams

внешний интерфейс JavaScript

Это пятый день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

Объект Location, объект URL, объект URLSearchParams

URL-адреса являются одной из инфраструктур Интернета. Браузеры предоставляют некоторые собственные объекты для управления URL-адресами.

Местоположение объекта

LocationОбъекты — это нативные объекты, предоставляемые браузерами, которые предоставляют информацию, связанную с URL, и методы работы. пройти черезwindow.locationа такжеdocument.locationНедвижимость, вы можете получить этот объект.

Атрибуты

LocationОбъект предоставляет следующие свойства.

  • Location.href: весь URL-адрес.
  • Location.protocol: протокол текущего URL, включая двоеточие (:).
  • Location.host: хозяин. Если порт не является протоколом по умолчанию80а также433, двоеточие (:) и порт.
  • Location.hostname: Имя хоста, не включая порт.
  • Location.port: номер порта.
  • Location.pathname: часть URL-адреса, начинающаяся с корневого пути./Начинать.
  • Location.search: Часть строки запроса, начинающаяся со знака вопроса.?Начинать.
  • Location.hash: Часть строки фрагмента, начиная с#Начинать.
  • Location.username: имя пользователя перед именем домена.
  • Location.password: пароль перед именем домена.
  • Location.origin: протокол, имя хоста и порт URL-адреса.
// 当前网址为
// http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol
// "http:"
document.location.host
// "www.example.com:4097"
document.location.hostname
// "www.example.com"
document.location.port
// "4097"
document.location.pathname
// "/path/a.html"
document.location.search
// "?x=111"
document.location.hash
// "#part1"
document.location.username
// "user"
document.location.password
// "passwd"
document.location.origin
// "http://user:passwd@www.example.com:4097"

Среди этих свойств толькоoriginСвойства доступны только для чтения, другие свойства доступны для записи.

Обратите внимание, что еслиLocation.hrefНапишите новый URL-адрес, браузер немедленно перейдет на этот новый адрес.

// 跳转到新网址
document.location.href = 'http://www.example.com';

Эта функция часто используется для автоматической прокрутки веб-страниц к новым точкам привязки.

document.location.href = '#top';
// 等同于
document.location.hash = '#top';

переписать напрямуюlocation, что эквивалентно написаниюhrefАтрибуты.

document.location = 'http://www.example.com';
// 等同于
document.location.href = 'http://www.example.com';

Кроме того,Location.hrefЭто свойство является единственным свойством, которое позволяет браузеру выполнять междоменную запись, т. е. негомологичное окно может перезаписывать другое окно (например, дочернее окно и родительское окно).Location.hrefатрибут, вызывая переход URL-адреса последнего.LocationНи одно из других свойств не разрешено для записи между доменами.

метод

(1) Location.assign()

assignМетод принимает строку URL-адреса в качестве параметра, заставляя браузер немедленно перейти к новому URL-адресу. Если параметр не является допустимой строкой URL, будет сообщено об ошибке.

// 跳转到新的网址
document.location.assign('http://www.example.com')

(2) Местоположение.заменить()

replaceМетод принимает строку URL-адреса в качестве параметра, заставляя браузер немедленно перейти к новому URL-адресу. Если параметр не является допустимой строкой URL, будет сообщено об ошибке.

это сassignОтличие метода в том, чтоreplaceв истории посещенных страниц браузераHistoryУдалите в нем текущий URL-адрес, то есть после использования этого метода кнопка «Назад» не может вернуться на текущую веб-страницу, что эквивалентно замене старого URL-адреса новым URL-адресом в истории просмотров. Одно из его применений заключается в том, что когда скрипт обнаруживает, что в данный момент это мобильное устройство, он сразу же переходит на мобильную версию веб-страницы.

// 跳转到新的网址
document.location.replace('http://www.example.com')

(3) Location.reload()

reloadЭтот метод заставляет браузер перезагружать текущий URL-адрес, что эквивалентно нажатию кнопки обновления браузера.

Он принимает логическое значение в качестве параметра. Если параметрtrue, браузер повторно запросит страницу с сервера, и после перезагрузки страница прокрутится до заголовка (т.scrollTop === 0). если параметрfalseили пустой, браузер перезагрузит страницу из локального кеша, и после перезагрузки позиция области просмотра страницы будет той же, что и до перезагрузки.

// 向服务器重新请求当前网址
window.location.reload(true);

(4) Location.toString()

toStringМетод возвращает всю строку URL, что эквивалентно чтениюLocation.hrefАтрибуты.

Кодирование и декодирование URL

URL-адрес веб-страницы может содержать только допустимые символы. Юридические символы делятся на две категории.

  • Метасимволы URL: точка с запятой (;), запятая(,), косая черта (/),вопросительный знак(?),двоеточие(:), в (@),&,знак равенства(=), плюс(+),Знак доллара($),Хэштег(#)
  • Семантические символы:a-z,A-Z,0-9, дефис (-), подчеркивать (_),точка(.), восклицательный знак (!), волнистая линия (~),звездочка(*),апостроф('), круглые скобки (())

В дополнение к указанным выше символам, другие символы в URL-адресе должны быть экранированы.Правило состоит в том, чтобы преобразовать каждый байт в знак процента (%) плюс две заглавные шестнадцатеричные буквы.

Например, в операционных системах UTF-8http://www.example.com/q=春节В этом URL-адресе китайский иероглиф «Весенний фестиваль» не является допустимым символом URL-адреса, поэтому он автоматически преобразуется браузером вhttp://www.example.com/q=%E6%98%A5%E8%8A%82. Среди них «весна» стала%E6%98%A5, "раздел" превращается в%E8%8A%82. Это связано с тем, что кодировка UTF-8 для «весны» и «раздела» соответственноE6 98 A5а такжеE8 8A 82, префикс каждого байта со знаком процента представляет собой кодировку URL.

JavaScript предоставляет четыре метода кодирования/декодирования URL.

  • encodeURI()
  • encodeURIComponent()
  • decodeURI()
  • decodeURIComponent()

encodeURI()

encodeURI()метод используется для перекодирования всего URL-адреса. Его аргументом является строка, представляющая весь URL-адрес. Он экранирует все символы, кроме метасимволов и семантических символов.

encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

encodeURIComponent()

encodeURIComponent()Метод используется для перекодирования компонентов URL, при котором будут перекодированы все символы, кроме семантических, т.е. метасимволы также будут перекодированы. Поэтому его нельзя использовать для перекодирования всего URL-адреса. Он принимает один параметр, который является фрагментом URL-адреса.

encodeURIComponent('春节')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

В приведенном выше кодеencodeURIComponent()Уйдет вместе с метасимволами URL-адреса, поэтому вы получите сообщение об ошибке, если перекодируете весь URL-адрес.

decodeURI()

decodeURI()метод декодирования всего URL. этоencodeURI()Обратный метод. Он принимает один параметр — перекодированный URL.

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春节"

decodeURIComponent()

decodeURIComponent()Используется для декодирования фрагментов URL. этоencodeURIComponent()Обратный метод. Он принимает один параметр — перекодированный фрагмент URL.

decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春节"

URL-интерфейс

Браузер изначально предоставляетURL()Интерфейс, представляющий собой функцию-конструктор, которая создает, анализирует и кодирует URL-адреса. Как правило, поwindow.URLВы можете получить этот конструктор.

Конструктор

URL()В качестве конструктора может быть сгенерирован экземпляр URL. Он принимает строку, представляющую URL-адрес, в качестве параметра. Если параметр не является допустимым URL, будет сообщено об ошибке.

var url = new URL('http://www.example.com/index.html');
url.href
// "http://www.example.com/index.html"

В приведенном выше примере создается экземпляр URL-адреса для представления указанного URL-адреса.

Кроме струн,URL()Параметр также может быть другим экземпляром URL. В настоящее время,URL()автоматически прочитает экземплярhrefсвойство, как фактический параметр.

Если строка URL является относительным путем, то в качестве основы для расчета требуется второй параметр, представляющий абсолютный путь.

var url1 = new URL('index.html', 'http://example.com');
url1.href
// "http://example.com/index.html"

var url2 = new URL('page2.html', 'http://example.com/page1.html');
url2.href
// "http://example.com/page2.html"

var url3 = new URL('..', 'http://example.com/a/b.html')
url3.href
// "http://example.com/"

В приведенном выше коде путь возвращаемого экземпляра URL-адреса получается путем переключения на первый параметр на основе второго параметра. В последнем примере первый параметр.., который представляет путь верхнего уровня.

свойства экземпляра

Свойства экземпляра URL такие же, какLocationСвойства объекта в основном такие же, и возвращается информация о текущем URL-адресе.

  • URL.href: возвращает полный URL
  • URL.protocol: возвращает протокол с двоеточием.:конец
  • URL.hostname: возвращает доменное имя
  • URL.host: возвращает имя домена и порт, включая:номер, порты по умолчанию 80 и 443 будут опущены
  • URL.port: обратный порт
  • URL.origin: возвращает протокол, доменное имя и порт.
  • URL.pathname: возвращает путь, начинающийся с косой черты./начало
  • URL.search: возвращает строку запроса, начинающуюся со знака вопроса.?начало
  • URL.searchParams: возвращаетURLSearchParamsнапример, свойствоLocationобъект не имеет
  • URL.hash: возвращает идентификатор фрагмента, за которым следует знак решетки.#начало
  • URL.password: возвращает пароль перед именем домена.
  • URL.username: возвращает имя пользователя перед именем домена.
var url = new URL('http://user:passwd@www.example.com:4097/path/a.html?x=111#part1');

url.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
url.protocol
// "http:"
url.hostname
// "www.example.com"
url.host
// "www.example.com:4097"
url.port
// "4097"
url.origin
// "http://www.example.com:4097"
url.pathname
// "/path/a.html"
url.search
// "?x=111"
url.searchParams
// URLSearchParams {}
url.hash
// "#part1"
url.password
// "passwd"
url.username
// "user"

Среди этих свойств толькоoriginСвойства доступны только для чтения, другие свойства доступны для записи и вступают в силу немедленно.

var url = new URL('http://example.com/index.html#part1');

url.pathname = 'index2.html';
url.href // "http://example.com/index2.html#part1"

url.hash = '#part2';
url.href // "http://example.com/index2.html#part2"

В приведенном выше коде измените экземпляр URLpathnameсвойства иhashсвойства, будут отражены в экземпляре URL в режиме реального времени.

статический метод

(1) URL.createObjectURL()

URL.createObjectURL()Метод используется для генерации строки URL для загруженных/скачанных файлов, файлов потокового мультимедиа. Эта строка представляетFileобъект илиBlobURL-адрес объекта.

// HTML 代码如下
// <div id="display"/>
// <input
//   type="file"
//   id="fileElem"
//   multiple
//   accept="image/*"
//   onchange="handleFiles(this.files)"
//  >
var div = document.getElementById('display');

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
  }
}

В приведенном выше кодеURL.createObjectURL()метод используется для создания строки URL-адреса для загруженного файла в виде<img>Источник изображения для элемента.

URL-адрес, сгенерированный этим методом, выглядит следующим образом.

blob:http://localhost/c745ef73-ece9-46da-8f66-ebes574789b1

Обратите внимание, что каждый раз, когда вы используетеURL.createObjectURL()метод, создаст экземпляр URL в памяти. Если строка URL, сгенерированная этим методом, больше не нужна, для экономии памяти можно использоватьURL.revokeObjectURL()метод освобождает этот экземпляр.

(2) URL.revokeObjectURL()

URL.revokeObjectURL()способ освободитьURL.createObjectURL()Экземпляр URL, сгенерированный методом. Его параметрыURL.createObjectURL()Строка URL, возвращаемая методом.

Следующее добавляет к примеру из предыдущего абзацаURL.revokeObjectURL().

var div = document.getElementById('display');

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(files[i]);
    div.appendChild(img);
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
  }
}

В приведенном выше коде после успешной загрузки изображения строка URL, сгенерированная для локального файла, становится бесполезной, поэтому ее можно использовать вimg.onloadВнутри функции обратного вызова передайтеURL.revokeObjectURL()метод для выгрузки этого экземпляра URL.

Объект URLSearchParams

Обзор

URLSearchParamsОбъекты — это собственные объекты браузера, используемые для построения, анализа и обработки строки запроса URL-адреса (то есть части URL-адреса после вопросительного знака).

Он также является конструктором и может генерировать экземпляры. Параметр может быть строкой запроса, начинающейся со знака вопроса.?Это может быть либо массив, либо объект, соответствующий строке запроса.

// 方法一：传入字符串
var params = new URLSearchParams('?foo=1&bar=2');
// 等同于
var params = new URLSearchParams(document.location.search);

// 方法二：传入数组
var params = new URLSearchParams([['foo', 1], ['bar', 2]]);

// 方法三：传入对象
var params = new URLSearchParams({'foo' : 1 , 'bar' : 2});

URLSearchParamsСтрока запроса автоматически кодируется.

var params = new URLSearchParams({'foo': '你好'});
params.toString() // "foo=%E4%BD%A0%E5%A5%BD"

В приведенном выше кодеfooЗначение - китайские иероглифы,URLSearchParamsОн автоматически кодируется в URL.

Когда браузер отправляет данные формы на сервер, их можно использовать напрямую.URLSearchParamsinstance как данные формы.

const params = new URLSearchParams({foo: 1, bar: 2});
fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

В приведенном выше кодеfetchПри отправке команд на сервер вы можете напрямую использоватьURLSearchParamsпример.

URLSearchParamsС участиемURL()Интерфейсы используются в комбинации.

var url = new URL(window.location);
var foo = url.searchParams.get('foo') || 'somedefault';

В приведенном выше коде экземпляр URLsearchParamsсобственность - этоURLSearchParamsнапример, так что вы можете использоватьURLSearchParamsинтерфейсgetметод.

var params = new URLSearchParams({'foo': 1 , 'bar': 2});

for (var p of params) {
  console.log(p[0] + ': ' + p[1]);
}
// foo: 1
// bar: 2

URLSearchParamsНет свойств экземпляра, только методы экземпляра.

URLSearchParams.toString()

toStringМетод возвращает строковую форму экземпляра.

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);

params.toString() // "foo=1&bar=2'

Затем, когда потребуется строка, она будет автоматически вызванаtoStringметод.

var params = new URLSearchParams({version: 2.0});
window.location.href = location.pathname + '?' + params;

В приведенном выше кодеlocation.hrefПри назначении вы можете напрямую использоватьparamsобъект. Это автоматически вызоветtoStringметод.

URLSearchParams.append()

append()метод используется для добавления параметра запроса. Он принимает два параметра, первый — имя ключа, второй — значение ключа, и возвращаемого значения нет.

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.append('baz', 3);
params.toString() // "foo=1&bar=2&baz=3"

append()Метод не распознает, существует ли уже имя ключа.

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.append('foo', 3);
params.toString() // "foo=1&bar=2&foo=3"

В приведенном выше коде в строке запросаfooуже существует, ноappendКлюч с тем же именем по-прежнему добавляется.

URLSearchParams.delete()

delete()Метод используется для удаления указанного параметра запроса. Он принимает имя ключа в качестве параметра.

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.delete('bar');
params.toString() // "foo=1"

URLSearchParams.has()

has()Метод возвращает логическое значение, указывающее, содержит ли строка запроса указанное имя ключа.

var params = new URLSearchParams({'foo': 1 , 'bar': 2});
params.has('bar') // true
params.has('baz') // false

URLSearchParams.set()

set()Метод используется для установки значения ключа строки запроса.

Он принимает два параметра: первый — это имя ключа, а второй — значение ключа. Если это существующий ключ, значение ключа будет перезаписано, в противном случае оно будет добавлено.

var params = new URLSearchParams('?foo=1');
params.set('foo', 2);
params.toString() // "foo=2"
params.set('bar', 3);
params.toString() // "foo=2&bar=3"

В приведенном выше кодеfooсуществующий ключ,barэто ключ, который еще не существует.

Если есть несколько ключей с одинаковым именем,setВсе существующие ключи будут удалены.

var params = new URLSearchParams('?foo=1&foo=2');
params.set('foo', 3);
params.toString() // "foo=3"

Ниже приведен пример замены текущего URL.

// URL: https://example.com?version=1.0
var params = new URLSearchParams(location.search.slice(1));
params.set('version', '2.0');

window.history.replaceState({}, '', location.pathname + `?` + params);
// URL: https://example.com?version=2.0

URLSearchParams.get(), URLSearchParams.getAll()

get()Метод используется для чтения указанного ключа в строке запроса. Он принимает имя ключа в качестве параметра.

var params = new URLSearchParams('?foo=1');
params.get('foo') // "1"
params.get('bar') // null

Два места требуют внимания. Во-первых, он возвращает строку. Если исходное значение является числовым значением, вам нужно преобразовать тип; во-вторых, если указанное имя ключа не существует, возвращаемое значениеnull.

Если есть несколько ключей с одинаковым именем,getВозвращает значение ключа в верхней части позиции.

var params = new URLSearchParams('?foo=3&foo=2&foo=1');
params.get('foo') // "3"

В приведенном выше коде строка запроса имеет триfooключ,getМетод возвращает первое значение ключа3.

getAll()Метод возвращает массив, членами которого являются все значения ключа для указанного ключа. Он принимает имя ключа в качестве параметра.

var params = new URLSearchParams('?foo=1&foo=2');
params.getAll('foo') // ["1", "2"]

В приведенном выше коде строка запроса имеет дваfooключ,getAllВозвращаемый массив состоит из двух элементов.

URLSearchParams.sort()

sort()Метод сортирует ключи в строке запроса в соответствии с кодовой точкой Unicode от наименьшего к наибольшему.

Метод не имеет возвращаемого значения, или возвращаемое значениеundefined.

var params = new URLSearchParams('c=4&a=2&b=3&a=1');
params.sort();
params.toString() // "a=2&a=1&b=3&c=4"

В приведенном выше коде, если есть два ключа с одинаковым именемa, они не сортируются, но сохраняется первоначальный порядок.

URLSearchParams.keys(), URLSearchParams.values(), URLSearchParams.entries()

Все три метода возвращают объект итератора дляfor...ofПереберите. Разница между ними в том, чтоkeysМетод возвращает итератор имен ключей,valuesМетод возвращает итератор значения ключа,entriesВозвращает итератор пар ключ-значение.

var params = new URLSearchParams('a=1&b=2');

for(var p of params.keys()) {
  console.log(p);
}
// a
// b

for(var p of params.values()) {
  console.log(p);
}
// 1
// 2

for(var p of params.entries()) {
  console.log(p);
}
// ["a", "1"]
// ["b", "2"]

если напрямуюURLSearchParamsДля обхода, по сути, внутренний вызовentriesинтерфейс.

for (var p of params) {}
// 等同于
for (var p of params.entries()) {}
Категории