[꼼꼼한 개발자] 꼼코더

[JavaScript] - encodeURIComponent()란? 간단하고 쉽게 이해하기 본문

간단하고 쉽게/JavaScript

[JavaScript] - encodeURIComponent()란? 간단하고 쉽게 이해하기

꼼코더 2023. 5. 2. 11:38
반응형

⌨️ 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>
Comments