인코딩은 문자를 컴퓨터에 저장 또는 통신에 사용할 목적으로 부호화하는 것이고, 그 반대가 디코딩이다. URI의 경우 전세계의 컴퓨터가 동일한 주소를 입력하면 동일한 페이지로 이동해야하는데, 한국어판 OS가 아닌 컴퓨터에서는 한국어가 작성된 url을 정상적으로 입출력하는 것이 불가능하다. 이 문제를 인코딩을 통해 모든 컴퓨터가 처리할 수 있도록 변경한다.
| 함수명 | 설명 |
| escape() | 영문알파벳, 숫자, 일부특수문자를 제외한 문자만 인코딩 *일부특수문자: @, *, -, _, +, ., / |
| unescape() | 영문알파벳, 숫자, 일부특수문자를 제외한 문자만 디코딩 |
| encodeURI(uri) | URL에 사용되는 일부특수문자를 제외한 문자만 인코딩 *일부특수문자: :, ;, /, =, ?, & |
| decodeURI(encodedURI) | URL에 사용되는 일부특수문자를 제외한 문자만 디코딩 |
| encodeURIComponent(uriComponent) | 알파벳과 숫자를 제외한 모든 문자를 모두 인코딩 |
| decodeURIComponent(encodedURI) | 알파벳과 숫자를 제외한 모든 문자를 모두 디코딩 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let escaped_string = escape("안녕하세요 반갑습니다.");
console.log(escaped_string);
// %uC548%uB155%uD558%uC138%uC694%20%uBC18%uAC11%uC2B5%uB2C8%uB2E4.
let unescaped_string = unescape(escaped_string);
console.log(unescaped_string);
// 안녕하세요 반갑습니다.
let encodeURI_string = encodeURI("https://coding-ji.tistory.com/entry/JavaScript의-내장함수-타이머함수");
console.log(encodeURI_string);
//https://coding-ji.tistory.com/entry/JavaScript%EC%9D%98-%EB%82%B4%EC%9E%A5%ED%95%A8%EC%88%98-%ED%83%80%EC%9D%B4%EB%A8%B8%ED%95%A8%EC%88%98
let decodeURI_string = decodeURI(encodeURI_string);
console.log(decodeURI_string);
// https://coding-ji.tistory.com/entry/JavaScript의-내장함수-타이머함수
let encodeURICom_string = encodeURIComponent("-내장함수-타이머함수");
console.log(`https://coding-ji.tistory.com/entry/JavaScript의${encodeURICom_string}`)
//https://coding-ji.tistory.com/entry/JavaScript의-%EB%82%B4%EC%9E%A5%ED%95%A8%EC%88%98-%ED%83%80%EC%9D%B4%EB%A8%B8%ED%95%A8%EC%88%98
let decodeURICom_string = decodeURI(encodeURICom_string);
console.log(decodeURICom_string);
//-내장함수-타이머함수
</script>
</body>
</html>
'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |
|---|---|
| JavaScript : Array관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : String관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 숫자 관련 내장함수 (0) | 2024.08.04 |
| JavaScript의 내장함수 : 타이머함수 (0) | 2024.08.04 |
| JavaScript : 예외처리에 대해서 알아보자 (0) | 2024.08.02 |
| JavaScript : DOM 변화 감지하기 - MutationObserver (0) | 2024.08.02 |
| JavaScript : 웹 컴포넌트(Web Component)란? (0) | 2024.07.31 |