[꼼꼼한 개발자] 꼼코더
[JavaScript] - encodeURIComponent()란? 간단하고 쉽게 이해하기 본문
반응형
⌨️ encodeURIComponent() 함수
encodeURIComponent() 함수는 인자로 받은 문자열을 URL에 포함될 수 있는 형태로 인코딩한다.
URL에는 특정 문자들이 사용될 수 없는데, 이런 문자들은 인코딩 처리를 해야 한다.
예를 들어, URL에 포함될 수 없는 공백 문자(" ")는' %20'로 인코딩 된다.
이 함수를 사용하여 입력된 입력값을 인코딩하고 URL에 파라미터로 추가하도록 응용할 수 있다.
👩🏻💻 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Info</title>
</head>
<body>
<!-- HTML form을 사용하여 사용자의 닉네임을 입력 받는다. -->
<h1>Get User Info</h1>
<form onsubmit="return false;">
<label>
Nickname:
<input type="text" id="nickname">
</label>
<!-- 버튼 클릭 시, getUserInfo() 함수를 호출한다. -->
<button type="button" onclick="getUserInfo()">Get Info</button>
</form>
<script>
function getUserInfo() {
// 입력된 닉네임을 가져온다.
let nickname = document.getElementById('nickname').value;
// URL에 포함될 수 있도록 인코딩 후 URL에 포합하여 페이지 이동.
window.location.href = '/users/' + encodeURIComponent(nickname);
}
</script>
</body>
</html>