sitelink1 https://mainia.tistory.com/2428 
sitelink2  
sitelink3  
sitelink4  
extra_vars4  
extra_vars5  
extra_vars6  

3개 모두 인코딩 관련 함수 입니다. 

인코딩은 네트워크에서 서로 정보를 주고 받기위해 ASCII 코드값으로 변경하는 행위를 말합니다. 

영어외에 2바이트를 쓰는 언어들이 있습니다. 

이런 언어들을 네트워크 상에서 전송하기 위해서는 인코딩함수를 이용해서 변환해야 합니다.

 

 

1. escape(), unescape() 함수

 

▼ 아스키문자에 해당하지 않는 문자들은 모두 유니코드 형식으로 변환해 줍니다.

그리니까 16진수 형태로 바꿔주는 것이죠. 표기법은 1바트일때 %XX 이며 2바이트 일때는 %uXXXX 입니다.

앞에 u 가 하나 더 붙죠. 그리고 16진수에서는 문자 2개가 하나의 바이트를 이룹니다.

아래 그림에서 처럼 영어 알파벳에 해당하는 부분만 빼고 16진수로 모두 바뀌었죠.

 

document.write("[escape 인코딩한 결과]<br/>");

document.write(escape("인코딩, escape"));

 

[escape 인코딩한 결과]

%uC778%uCF54%uB529%2C%20escape

 

▼ 인코딩한 문자열을 다시 원래대로 돌리고 싶다면 디코딩을 해야 겠죠. 디코딩 함수는 unescape 입니다.

인코딩 함수앞에 un 이 붙어 있습니다.

 

document.write("[escape 인코딩한 결과]<br/>");

document.write(escape("인코딩, escape ") + "<br/>");

document.write(unescape(escape("인코딩, escape")));

 

[escape 인코딩한 결과]

%uC778%uCF54%uB529%2C%20escape%20

인코딩, escape

 

 

2. encodeURI() 함수

 

▼ encodeURI 는 URL 주소표시를 나타내는 앞자리 특수문자는 인코딩하지 않습니다.

인코딩 하지 않는 문자는 “: ; / = ? &” 입니다. 주소를 통해 넘기는 파라미터를 인코딩할때 사용합니다.

 

document.write("URI 인코딩<br/>");

document.write(escape("http://녹두장군.com")+ "<br/>");

document.write(encodeURI("http://녹두장군.com"));

 

URI 인코딩

http%3A//%uB179%uB450%uC7A5%uAD70.com

http://%EB%85%B9%EB%91%90%EC%9E%A5%EA%B5%B0.com

 

 

3. encodeURLComponent() 함수

 

▼ encodeURI 와 달리 주소를 나타내는 특수문자도 인코딩을 하게 됩니다.

모든 문자를 인코딩 하기 때문에 경로를 나타내는 /file/exe/index 값이 있다면 “/” 도 인코딩하기 하게 됩니다.

이렇게 되면 서버에서는 인식을 못합니다.

이럴때는 encodeURI 를 사용해야 합니다.

다시 디코딩을 하시려면 decodeURIComponent() 함수를 사용합니다.

 

document.write("URI, URLComponent 인코딩<br/>");

document.write(encodeURI("http://mainia.tistory.com?id=홍길동&phone=010") + "<br/>");

document.write(encodeURIComponent("http://mainia.tistory.com?id=홍길동&phone=010"));

 

URI, URLComponent 인코딩

http://mainia.tistory.com?id=%ED%99%8D%EA%B8%B8%EB%8F%99&phone=010

http%3A%2F%2Fmainia.tistory.com%3Fid%3D%ED%99%8D%EA%B8%B8%EB%8F%99%26phone%3D010

번호 제목 글쓴이 날짜 조회 수
226 체크박스에 체크된 항목 개수 구하기 황제낙엽 2023.06.10 497
225 JSON 클래스가 지원하는 function 황제낙엽 2023.03.31 224
224 (Copilot) JSON 객체의 내부 데이터 리스트 길이를 구하는 방법 황제낙엽 2023.03.30 249
223 배열에 대한 루프문 조회 (loop iterator) 황제낙엽 2023.03.01 561
222 (Copilot) 바닐라 스크립트가 뭐지? 황제낙엽 2023.02.24 264
221 CryptoJS 를 이용한 암호화 황제낙엽 2023.02.15 472
220 [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 file 황제낙엽 2023.02.02 431
219 Fetch API (CORS 극복을 위한 노력) 황제낙엽 2021.12.05 443
218 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 506
217 CORS 의 내용과 이에 대한 우회 방안들 file 황제낙엽 2021.12.05 459
216 client 통신 기술 jquery ajax, fetch, axios 황제낙엽 2021.12.05 270
215 문자열에서 역슬래시(backslash) 문자와 유니코드(Unicode)에 대한 고찰 file 황제낙엽 2021.06.03 494
214 XMLHttpRequest Specification 황제낙엽 2021.04.29 428
» 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 황제낙엽 2021.04.27 446
212 자바스크립트 학습용 유튜브 강의 (드림코딩 by 엘리) 황제낙엽 2021.03.07 467
211 IIFE (Immediately Invoked Function Expression) 황제낙엽 2021.03.07 260
210 Arrow function 황제낙엽 2021.03.07 257
209 함수 Call Stack 디버깅을 위한 함수 선언 팁 황제낙엽 2021.03.07 258
208 Function declaration 과 Function expression 의 차이 황제낙엽 2021.03.07 219
207 Early return, early exit - 스크립트 가독성 개선 팁 황제낙엽 2021.03.07 373