자바스크립트 startsWith() 함수 – 특정 문자열로 시작하는지 체크

`String.prototype.startsWith()` 사용법

startsWith() 함수는
문자열이 특정 문자열로 시작하는지 체크합니다.

이 함수는 대소문자를 구분합니다.

특정 문자열로 시작하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

JavaScript

const strEn = "Hello, world!";

console.log(strEn.startsWith("Hello")); // true
console.log(strEn.startsWith("hello")); // false => 대소문자를 구분
console.log(strEn.startsWith("world")); // false

// 검색을 시작할 0부터 시작하는 인덱싱
console.log(strEn.startsWith("world", 7)); // true => 8 번째 시작하는 부분

const strKo = "환영합니다!";
console.log(strKo.startsWith("환")); // true
console.log(strKo.startsWith("환영합니다!")); // true
console.log(strKo.startsWith("환영합니다xxxx")); // false

문자열이 특정 문자열로 끝나는지 체크하려면 endsWith() 함수를 사용하세요.

startsWith() 함수의 형식은 다음과 같습니다.

구문

매개변수

startsWith() 함수의 매개변수
`searchString`	필수. 확인할 문자열입니다. (정규 표현식 패턴은 사용할 수 없습니다.)
`position`	옵션. 검색을 시작할 `0` 기반의 인덱스입니다. 생략하면 기본값으로 `0`이 사용됩니다.

반환 값

searchString로 시작하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

주의할 점

빈 문자열("")은 모든 문자열의 시작 부분에 있다고 간주되므로, 빈 문자열을 searchString으로 사용하면 항상 true를 반환합니다.

이러한 동작은 문자열의 논리적 정의에 근거합니다. 빈 문자열은 어떤 문자열의 시작 부분에 존재하므로, 빈 문자열로 시작하는 모든 문자열에 대해 true를 반환하는 것이 자연스러운 결과입니다. 따라서, 이 개념은 자바스크립트뿐만 아니라 여러 프로그래밍 언어에서 보편적으로 적용됩니다.

유용한 활용 예제

startsWith() 함수의 쓰임새를 잘 나타내는 활용 예제입니다.

HTML의 lang 속성값을 구분하는 예제는 실제 웹 개발에서 많이 활용되는 방식입니다. 이를 통해 웹 페이지의 다국어 지원을 효과적으로 관리할 수 있습니다. 아래는 startsWith() 함수를 사용하여 lang 속성값을 확인하는 예제입니다.

lang 속성은 HTML 요소 콘텐츠와 텍스트가 포함된 모든 요소 속성에 대한 기본 언어(language)를 지정합니다.

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>언어 감지</title>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                const lang = document.documentElement.lang; // HTML의 lang 속성값 가져오기

                if (lang.startsWith("en")) {
                    console.log("언어가 영어로 설정되었습니다.");
                } else if (lang.startsWith("ko")) {
                    console.log("언어가 한국어로 설정되었습니다.");
                } else if (lang.startsWith("fr")) {
                    console.log("언어가 프랑스어로 설정되었습니다.");
                } else {
                    console.log("지원되지 않는 언어입니다.");
                }
            });
        </script>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

코드 부연설명입니다.

document.documentElement.lang은 현재 문서의 루트 요소(즉, <html> 요소)의 lang 속성값을 가져옵니다.

startsWith("en")은 lang 속성값이 대소문자를 구분해서 "en"으로 시작하는지를 체크합니다. "en"일 경우 true를 반환합니다.