Javascript

Структура URL

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

схема — определяет тип интернет-сервиса (наиболее распространенным является HTTP или HTTPS)
логин — имя пользователя, используемое для доступа к ресурсу
пароль — пароль указанного пользователя
хост — полностью прописанное доменное имя хоста в системе DNS или IP-адрес хоста в форме четырёх групп десятичных чисел, разделённых точками (например, wm-school.ru)
порт — определяет номер порта на хосте (по умолчанию для HTTP является 80)
URL-путь — определяет путь на сервере (если пропущен: корневой каталог сайта)
параметры — строка запроса с передаваемыми на сервер (методом GET) параметрами. Начинается с символа , разделитель параметров — знак . Пример:
якорь — идентификатор «якоря» с предшествующим символом диез . Якорем может быть указан заголовок внутри документа или атрибут id элемента. По такой ссылке браузер откроет страницу и переместит окно к указанному элементу. Например, ссылка на этот раздел статьи: .

Стандарт URL использует набор символов ASCII.
Кодирование в URL заменяет небезопасные символы ASCII на символ «%» и следующие две шестнадцатеричные цифры соответствующего значения в наборе символов ISO-8859-1.
C момента своего изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов: латинские буквы, цифры и лишь некоторые знаки пунктуации. Все другие символы необходимо перекодировать.
Например, перекодироваться должны буквы кириллицы, буквы с диакритическими знаками, лигатуры, иероглифы.
Перекодирующая кодировка называется URL-encoding, URLencoded или percent‐encoding.
URL-адреса не могут содержать пробелы. Кодирование URL-адрес, как правило заменяет каждый пробел знаком плюс (+), или %20. Символы кириллицы URL кодирование заменяет на соответствующие комбинации % и код символа.

Например, строка вида:

кодируется как:

Преобразование происходит в два этапа: сначала каждый символ кириллицы кодируется в UTF-8 в последовательность из двух байтов, а затем каждый байт этой последовательности записывается в шестнадцатеричном представлении с предшествующим знаком процента (%):

К → D0 и 9C → %d0%9a
о → D0 и B8 → %d0%be
д → D0 и BA → %d0%b4
и → D1 и 80 → %d0%b8, и т. д.

URL-коды символов UTF-8 представлены в Таблице URL кодов символов UTF-8
URL-коды специальных управляющих символов таблицы ASCII (диапазон 00-31, плюс 127), символов ISO-Latin (диапазон 128-255), зарезервированных символов (знак доллара, амперсанд, плюс, слэш, двоеточие, точка с запятой, знак равенства, знак вопроса, знак эт (собака)), небезопасных символов (пробел, кавычки, знак меньше, знак больше, знак диез, знак проценты, фигурные скобки, прямой слэш, обратный слэш, тильда, квдратные скобки, гравис) представлены в Таблице символов кодирования URL

Кодирование

Существует стандарт RFC3986, который определяет список разрешённых и запрещённых символов в URL.

Запрещённые символы, например, нелатинские буквы и пробелы, должны быть закодированы – заменены соответствующими кодами UTF-8 с префиксом , например: (исторически сложилось так, что пробел в URL-адресе можно также кодировать символом , но это исключение).

К счастью, объекты делают всё это автоматически. Мы просто указываем параметры в обычном, незакодированном, виде, а затем конвертируем в строку:

Как видно, слово в пути URL-адреса и буква в параметре закодированы.

URL стал длиннее, так как каждая кириллическая буква представляется двумя байтами в кодировке UTF-8.

Раньше, до того как появились объекты , люди использовали для URL-адресов обычные строки.

Сейчас часто удобнее, но строки всё ещё можно использовать. Во многих случаях код с ними короче.

Однако, если мы используем строку, то надо самим позаботиться о кодировании специальных символов.

Для этого есть встроенные функции:

encodeURI – кодирует URL-адрес целиком.
decodeURI – декодирует URL-адрес целиком.
encodeURIComponent – кодирует компонент URL, например, параметр, хеш, имя пути и т.п.
decodeURIComponent – декодирует компонент URL.

Возникает естественный вопрос: «Какая разница между и ? Когда использовать одну и другую функцию?»

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

Как мы видим, в URL-адресе разрешены символы , , , , .

…С другой стороны, если взглянуть на один компонент, например, URL-параметр, то в нём такие символы должны быть закодированы, чтобы не поломать форматирование.

кодирует только символы, полностью запрещённые в URL.
кодирует эти же символы плюс, в дополнение к ним, символы , , , , , , , , , и .

Так что для URL целиком можно использовать :

…А для параметров лучше будет взять :

Сравните с :

Как видим, функция не закодировала символ , который является разрешённым в составе полного URL-адреса.

Но внутри параметра поиска символ должен быть закодирован, в противном случае мы получим , что значит плюс непонятный параметр . Не то, что предполагалось.

Чтобы правильно вставить параметр поиска в строку URL, мы должны использовать для него только . Наиболее безопасно кодировать и имя, и значение, за исключением случаев, когда мы абсолютно уверены в том, что они содержат только разрешённые символы.

Разница в кодировании с

Классы и базируются на последней спецификации URI, описывающей устройство адресов: RFC3986, в то время как функции – на устаревшей версии стандарта RFC2396.

Различий мало, но они есть, например, по-разному кодируются адреса IPv6:

Как мы видим, функция заменила квадратные скобки , сделав адрес некорректным. Причина: URL-адреса IPv6 не существовали в момент создания стандарта RFC2396 (август 1998).

Тем не менее, такие случаи редки. По большей части функции работают хорошо.

Пример использования

Базовое использование

const uri = "https://basicweb.ru/?q=справочник";
const encoded = encodeURI(uri); // кодируем URI
console.log(encoded); // "https://basicweb.ru/?q=%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA"

const decoded = decodeURI(encoded); // декодируем URI
console.log(decoded); // "https://basicweb.ru/?q=справочник"

Отличие работы методов encodeURIComponent() и encodeURI()

const str1 = ";,/?:@&=+$";        		// Reserved Characters
const str2 = "-_.!~*'()";         		// Unescaped Characters
const str3 = "#";                 			// Number Sign
const str4 = "AZZZ zasdsd 19999";  // Alphanumeric Characters + Space

console.log(encodeURI(str1));                       // ;,/?:@&=+$
console.log(encodeURIComponent(str1));  // %3B%2C%2F%3F%3A%40%26%3D%2B%24

console.log(encodeURI(str2));          			// -_.!~*'()
console.log(encodeURIComponent(str2));      // -_.!~*'()

console.log(encodeURI(str3));         		   // #
console.log(encodeURIComponent(str3)); // %23

console.log(encodeURI(str4));          		   // AZZZ%20zasdsd%2019999
console.log(encodeURIComponent(str4)); // AZZZ%20zasdsd%2019999

JavaScript объект Global

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sinh()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
Modifiers:
g
i
m
Groups:

(x|y)
Metacharacters:
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx
Quantifiers:
+
*
?
{X}
{X,Y}
{X,}
$
^
?=
?!
Properties:
constructor
global
ignoreCase
lastIndex
multiline
source
Methods:
compile()
exec()
test()
toString()

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

JavaScript

JS Массивы
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Булевы
constructor
prototype
toString()
valueOf()

JS Классы
constructor()
extends
static
super

JS Даты
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Ошибка
name
message

JS Булевы
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Математика
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
cos()
cosh()
E
exp()
floor()
LN2
LN10
log()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Числа
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS ОператорыJS Рег.Выражения
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Заявления
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS Строки
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Encoding data into base64 format

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only of ASCII characters, base64 strings are generally url-safe, and that’s why they can be used to encode data in Data URLs.

The Web APIs have native methods to encode or decode to base64: Base64 encoding and decoding.

Base64 encoding of a file or string on Linux and Mac OS X systems can be achieved using the command-line (or, as an alternative, the utility with argument).

On Windows, Convert.ToBase64String from PowerShell can be used to perform the Base64 encoding:

Alternatively, a GNU/Linux shell (such as WSL) provides the utility :

8 ответов

Лучший ответ

Периоды не должны нарушать URL, но я не знаю, как вы используете период, поэтому я не могу сказать точно. Ни одна из известных мне функций не кодирует ‘.’ для URL, означающего, что вам придется использовать собственную функцию для кодирования ‘.’ ,

Вы можете кодировать данные с помощью base64, но я не верю, что в js есть родной способ сделать это. Вы также можете заменить все периоды их эквивалентами ASCII (% 2E) как на стороне клиента, так и на стороне сервера.

По сути, обычно нет необходимости кодировать ‘.’, Поэтому, если вам нужно это сделать, вам нужно будет найти собственное решение. Вы можете также провести дополнительное тестирование, чтобы убедиться, что ‘.’ на самом деле нарушит URL.

Hth

superultranova
8 Фев 2011 в 21:59

Я знаю, что это старая ветка, но я нигде не видел примеров URL, которые вызывали исходную проблему. Я столкнулся с подобной проблемой сам пару дней назад с приложением Java. В моем случае строка с точкой была в конце элемента пути URL, например.

В этом случае библиотека Spring, которую я использую, передавала мне только часть «test» этой строки соответствующему аннотированному параметру метода моего класса контроллера, предположительно потому, что она обрабатывала «.string» как расширение файла и удаление это прочь Возможно, это та же самая основная проблема с первоначальной проблемой выше?

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

Джон

John Rix
18 Авг 2011 в 14:12

Периоды не должны быть закодированы в URL. приведен RFC.

Если период «ломает» что-то, возможно, ваш сервер делает свою собственную интерпретацию URL, что, конечно, хорошо, но это означает, что вы должны придумать собственную схему кодирования, когда ваши собственные метасимволы нуждаются в побеге.

Pointy
8 Фев 2011 в 21:56

Если это возможно с помощью файла .htaccess, это действительно здорово и просто. Просто добавьте \ перед периодом. Что-то вроде:

David Lartey
16 Дек 2015 в 17:14

У меня был тот же вопрос, и, возможно, мое решение может помочь кому-то еще в будущем.

Мое решение состояло в том, чтобы заменить все периоды html-сущностью, как показано на рисунке 1 :

Рисунок 1. Решение

TJ.
9 Июл 2013 в 08:50

У меня была такая же проблема, когда мой .htaccess ломал входные значения с. Так как я не хотел менять то, что делал .htaccess, я использовал это, чтобы исправить это:

Это делает все стандартное кодирование, а затем заменяет. с таким же эквивалентом% 2E. PHP автоматически преобразует обратно в. в значении $ _REQUEST, но .htaccess не видит его как точку, поэтому все хорошо.

Matthew Cornelisse
9 Фев 2016 в 18:09

У меня были проблемы с .s в остальных api urls. Это факт, что они интерпретируются как расширения, что по-своему имеет смысл. Экранирование не помогает, потому что они не покинуты до вызова (как уже отмечалось). Добавление трейлинга / тоже не помогло. Я обошел это, передав вместо этого значение в качестве именованного аргумента. например api / Id / Text.string to api / Id? arg = Text.string. Вам нужно будет изменить маршрутизацию на контроллере, но сам обработчик может остаться прежним.

user8296471
9 Июл 2018 в 14:47

Это проблема рельсов, см. REST-маршрутизация REST: точки в идентификатор элемента ресурса для пояснения (и руководство по маршрутизации в Rails, раздел 3.2)

Community
23 Май 2017 в 11:46

JS19 encodeURI и encodeURIComponent

s http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>tyle=»clear:both;»>

Универсальный идентификатор ресурса, или URI, — это строка, которая идентифицирует ресурсы в Интернете (например, веб-страницы или файлы) и транспортный протокол (например, HTTP или FTP) для доступа к этим ресурсам.

сЭтот метод может кодировать URI, а кодирование — кодировкой UTF-8. Первый не кодирует специальные символы, принадлежащие URI, такие как двоеточия и косые черты, а последний кодирует все найденные специальные символы.

Все символы заменены, но следующие символы не включены, даже если они имеют соответствующую escape-последовательность UTF-8:

Типы	содержать
Зарезервированные персонажи
Неоткрытые персонажи	буква и цифра
Числовой знак

предостерегают,Он не может сгенерировать URI, который может быть применен к запросам GET или POST в протоколе HTTP, например, XMLHTTPRequests, поскольку,, сОни не кодируются, но являются специальными символами в запросах GET и POST. ОднакоЭтот метод кодирует эти символы.

Так в общем, пользуйсяСценарий заключается в обработке определенного сегмента (обычно параметров запроса) в URI, который используется чаще

、Используется для декодирования, аналогичное использование.

Интеллектуальная рекомендация

1. Для реальных сигналов (для понимания): A (ω) является соотношением амплитуды выходного сигнала и амплитуды входного сигнала, называемого частотой амплитуды. Φ (ω) — это разница межд…

Один. вести Многие люди задавали некоторые вопросы о создании проекта Flex + LCDS (FDS) в сообщениях и группах. Из-за операции ее трудно четко объяснить, поэтому я написал простой учебник (я обещал эт…

package com.example.phonehttp; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.widget.ScrollView; import android.widget.TextView; public class MainActi…

Он предназначен для реализации подкласса того же родительского класса с родительским классом. Полиморфизм Один и тот же ссылочный тип использует разные экземпляры для выполнения разных операций; Идея …

тема: Объедините два упорядоченных слоя в новый заказанный список и возврат. Новый список состоит из всех узлов двух связанных списков, данных сплавным. Пример: Анализ: два связанных списка состоит в …

Вам также может понравиться

D. Самая ценная строка Пример ввода 2 2 aa aaa 2 b c Образец вывода aaa c На самом деле, будучи задетым этим вопросом, вы должны быть осторожны. После инвертирования строки, если две строки имеют один…

Given a 2D integer matrix M representing the gray scale of an image, you need to design a smoother to make the gray scale of each cell becomes the average gray scale (rounding down) of all the 8 surro…

calc () может быть очень незнакомым для всех, и трудно поверить, что calc () является частью CSS. Поскольку он выглядит как функция, почему он появляется в CSS, поскольку это функция? Этот момент такж…

Основываясь на дереве регрессии, сформированном CART, а также на предварительной и последующей обрезке дерева, код выглядит следующим образом:…

Откат Обновление в режиме онлайн с версии Centos (CentOS Linux версии 7.3.1611 (Core) до CentOS Linux версии 7.5.1804 (Core)) # ошибка соединения yum-ssh после обновления yexpected key exchange group …

Encoding

There’s a standard RFC3986 that defines which characters are allowed in URLs and which are not.

Those that are not allowed, must be encoded, for instance non-latin letters and spaces – replaced with their UTF-8 codes, prefixed by , such as (a space can be encoded by , for historical reasons, but that’s an exception).

The good news is that objects handle all that automatically. We just supply all parameters unencoded, and then convert the to string:

As you can see, both in the url path and in the parameter are encoded.

The URL became longer, because each cyrillic letter is represented with two bytes in UTF-8, so there are two entities.

In old times, before objects appeared, people used strings for URLs.

As of now, objects are often more convenient, but strings can still be used as well. In many cases using a string makes the code shorter.

If we use a string though, we need to encode/decode special characters manually.

There are built-in functions for that:

encodeURI – encodes URL as a whole.
decodeURI – decodes it back.
encodeURIComponent – encodes a URL component, such as a search parameter, or a hash, or a pathname.
decodeURIComponent – decodes it back.

A natural question is: “What’s the difference between and ? When we should use either?”

That’s easy to understand if we look at the URL, that’s split into components in the picture above:

As we can see, characters such as , , , , are allowed in URL.

…On the other hand, if we look at a single URL component, such as a search parameter, these characters must be encoded, not to break the formatting.

encodes only characters that are totally forbidden in URL.
encodes same characters, and, in addition to them, characters , , , , , , , , , and .

So, for a whole URL we can use :

…While for URL parameters we should use instead:

Compare it with :

As we can see, does not encode , as this is a legit character in URL as a whole.

But we should encode inside a search parameter, otherwise, we get – that is actually plus some obscure parameter . Not as intended.

So we should use only for each search parameter, to correctly insert it in the URL string. The safest is to encode both name and value, unless we’re absolutely sure that it has only allowed characters.

Encoding difference compared to

Classes and are based on the latest URI specification: RFC3986, while functions are based on the obsolete version RFC2396.

There are a few differences, e.g. IPv6 addresses are encoded differently:

As we can see, replaced square brackets , that’s not correct, the reason is: IPv6 urls did not exist at the time of RFC2396 (August 1998).

Such cases are rare, functions work well most of the time.

3 ответа

Если вы хотите кодировать строку запроса, используйте . Причина проста: среди нескольких других символов он будет кодировать косую черту и amersand, что не будет.

encodeURIComponent

Какая польза? Скажем, вы хотите закодировать URL и передать его в строке запроса, это позволит вам закодировать все символы, чтобы вы получили что-то вроде этого:

чтобы получить результат

Теперь вы можете безопасно передать это как строку запроса, например так:

Обратите внимание, что оба URL имеют параметр строки запроса , но это нормально, потому что закодированный URL имеет этот кодированный код. Весь параметр равен. Нет конфликта с во втором закодированном URL

Нет конфликта с во втором закодированном URL.

encodeURI

Теперь, если вы хотите закодировать полный URL-адрес, который у вас уже есть, используйте .

даст вам

Обратите внимание, как это сохраняет URL-адрес действительным, и в этом случае кодирует только пробел. Если бы вы запустили , вы получите беспорядок, который вы видите в моем первом примере

Какие символы закодированы?

Как прокомментировал yabol в своем первом посте, эта страница показывает вам различия между encodeURI, encodeURIComponent, и экранирование: нижние символы ASCII . Вы заметили, что кодирует следующие символы, которые не:

Ваш вопрос

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

Wrong

Ваш URL-адрес example.com содержит два параметра строки запроса: и

Right

Ваш URL-адрес example.com содержит только один параметр строки запроса:

Если вам нужно закодировать в качестве параметра строки запроса, то вам определенно следует использовать (2)

возьмите, например, переводчик Google, всякий раз, когда вы вводите адрес в разделе Перевод, адрес преобразуется в компонент URI, а затем передается на серверы Google

Если какой-либо URL-адрес необходимо использовать в качестве компонента, то лучше всего

Второй ответ на вопрос, который вы связали, уже говорит об этом довольно четко:
«Если вы кодируете строку для добавления в компонент URL (параметр строки запроса), вам следует вызвать encodeURIComponent.

Если вы кодируете существующий URL, вызовите encodeURI. «

Так что в вашем примере encodeURIComponent является правильным.

Syntax

Data URLs are composed of four parts: a prefix (), a MIME type indicating the type of data, an optional token if non-textual, and the data itself:

The is a MIME type string, such as for a JPEG image file. If omitted, defaults to

If the data contains , or contains space characters, newline characters, or other non-printing characters, those characters must be percent-encoded (aka “URL-encoded”).

If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document’s type). Otherwise, you can specify to embed base64-encoded binary data. You can find more info on MIME types here and here.

A few examples:

The text/plain data . Note how the comma is percent-encoded as , and the space character as .

base64-encoded version of the above

An HTML document with

An HTML document that executes a JavaScript alert. Note that the closing script tag is required.

SearchParams “?…”

Let’s say we want to create a url with given search params, for instance, .

We can provide them in the URL string:

…But parameters need to be encoded if they contain spaces, non-latin letters, etc (more about that below).

So there’s a URL property for that: , an object of type .

It provides convenient methods for search parameters:

– add the parameter by ,
– remove the parameter by ,
– get the parameter by ,
– get all parameters with the same (that’s possible, e.g. ),
– check for the existence of the parameter by ,
– set/replace the parameter,
– sort parameters by name, rarely needed,
…and it’s also iterable, similar to .

An example with parameters that contain spaces and punctuation marks:

SearchParams «?…»

Допустим, мы хотим создать URL-адрес с заданными параметрами, например, .

Мы можем указать их в строке:

…Но параметры должны быть правильно закодированы, чтобы они могли содержать не-латинские буквы, пробелы и т.п. (об этом подробнее далее).

Так что для этого есть свойство – объект типа .

Он предоставляет удобные методы для работы с параметрами:

– добавить параметр по имени,
– удалить параметр по имени,
– получить параметр по имени,
– получить все параметры с одинаковым именем (такое возможно, например: ),
– проверить наличие параметра по имени,
– задать/заменить параметр,
– отсортировать параметры по имени, используется редко,
…и является перебираемым, аналогично .

Пример добавления параметров, содержащих пробелы и знаки препинания:

Creating a URL

The syntax to create a new object:

– the full URL or only path (if base is set, see below),
– an optional base URL: if set and argument has only path, then the URL is generated relative to .

For example:

These two URLs are same:

We can easily create a new URL based on the path relative to an existing URL:

The object immediately allows us to access its components, so it’s a nice way to parse the url, e.g.:

Here’s the cheatsheet for URL components:

is the full url, same as
ends with the colon character
– a string of parameters, starts with the question mark
starts with the hash character
there may be also and properties if HTTP authentication is present: (not painted above, rarely used).

We can pass objects to networking (and most other) methods instead of a string

We can use a object in or , almost everywhere where a URL-string is expected.

Generally, the object can be passed to any method instead of a string, as most methods will perform the string conversion, that turns a object into a string with full URL.