Tags: JavaScript

JavaScript: kiedy należy użyć escape zamiast encodeURI lub encodeURIComponent?

Funkcje `escape`, `encodeURI` i `encodeURIComponent` służą do kodowania określonych znaków w ciągach URI w JavaScript. Ich użycie zależy od kontekstu i tego, co dokładnie chcemy osiągnąć:

escape()

- Funkcja `escape()` była używana w starszych wersjach JavaScript do kodowania nie-ASCII znaków, znaków specjalnych jak `%` oraz niektórych znaków ASCII, które mają specjalne znaczenie w URI.
- W nowoczesnym JavaScript `escape()` jest przestarzała i nie zaleca się jej używania. Została zastąpiona przez `encodeURI` i `encodeURIComponent`, które są bardziej precyzyjne w swoim działaniu.
- `escape` nie koduje znaków takich jak `+`, `@`, `/`, `?`, `:`, `&` i `#`, co czyni ją niewłaściwą do stosowania w kodowaniu URL.

encodeURI()

- Używaj `encodeURI()`, gdy chcesz zakodować pełny URL, który może zawierać wiele parametrów lub ścieżek. Na przykład, gdy masz kompletny URL, którego nie chcesz całkowicie zakodować, ponieważ potrzebujesz, aby poszczególne części, takie jak protokół, ścieżki i parametry, pozostały w rozpoznawalnej formie.
- `encodeURI` zakoduje znaki, które nie są dozwolone w standardowym URI, ale nie zakoduje tych, które mają specjalne znaczenie w kontekście URI, takich jak `:`, `/`, `?`, `&`, i `#`.

encodeURIComponent()

- Używaj `encodeURIComponent()`, gdy kodujesz pojedyncze składniki URI, takie jak wartości parametrów. Na przykład, gdy dodajesz parametry do zapytania GET lub konfigurujesz żądanie AJAX, które może zawierać znaki specjalne.
- `encodeURIComponent` zakoduje większość znaków, które mogą zakłócić przekazywanie wartości parametrów, w tym takie znaki jak `&`, `?`, i `#`, które `encodeURI` pozostawia bez zmian.

Przykład użycia `encodeURI` vs `encodeURIComponent`

**Przykład użycia `encodeURI` vs `encodeURIComponent`**:

Załóżmy, że masz URL z parametrami zapytania:

let baseUrl = "http://example.com/search?query=";
let searchQuery = "my test & your test?";

// Użycie encodeURI
let encodedUrl = encodeURI(baseUrl + searchQuery);
console.log(encodedUrl); // Wynik: "http://example.com/search?query=my test & your test?"

// Użycie encodeURIComponent
let encodedUrlComponent = encodeURI(baseUrl) + encodeURIComponent(searchQuery);
console.log(encodedUrlComponent); // Wynik: "http://example.com/search?query=my%20test%20%26%20your%20test%3F"

W powyższym przykładzie `encodeURI` nie zakodowałby `&` i `?`, ponieważ są to dozwolone znaki w URI, podczas gdy `encodeURIComponent` zakodowałby te znaki, ponieważ traktuje przekazany ciąg jako pojedynczy komponent, który może zawierać znaki specjalne.

Podsumowując, nie używaj `escape` w nowoczesnych aplikacjach internetowych. Zamiast tego używaj `encodeURI`, gdy chcesz zakodować pełny URL, ale nie chcesz zakodować jego składników separatorów, lub `encodeURIComponent`, gdy musisz zakodować pojedyncze elementy URI, takie jak parametry zapytania.