[ 자바스크립트 ] 문자열에서의 endsWith() & startsWith() 사용법

최종 수정일 : 2016. 10. 31.

Use the Google Translate, if you want to read this page in your language.
But its translation is probably inaccurate.
☞ Go to the Google Translate.

[ Javascript ] endsWith() & startsWith()

• Polyfill : endsWith() & startsWith()
• Example 1 : 대표적인 사용법
• Example 2 : 기본 예문
• Example 3 : 두 함수는 대소문자를 구분한다.
• Example 4 : 문장 양끝의 공백은 제거하는 것이 좋다.
• Example 5 : 두 함수는 문장 전체를 대상으로 한다.
• Example 6 : 문장 안에서, 실행할 위치를 따로 설정할 수 있다.
• Example 7 : 위치의 최대 허용값은 그 문장의 전체 길이값이다.
• Example 8 : 인수가 빈 문자열이면, 결과는 항상 true이다.
• Example 9 : 인수가 정규식이면, 에러가 발생한다.

---

Polyfill : endsWith() & startsWith()

 
<script type="text/javascript">
/* 
 * source : https://tonks.tistory.com/164#_javascript_endsWith&startsWith
 * last modified : 2016. 10. 21. 
 */ 
( function (){ 
    var testEndsWith = ( "everyone" ).endsWith( "every", 5 ) || false; 
    var testStartsWith = ( "everyone" ).startsWith( "one", 5 ) || false; 

    if ( ! testEndsWith || ! testStartsWith ){ 

        var checkString = function ( existingString, searchString, proto ){ 

            // 검색할 문자열로 정규식을 사용할 수는 없음. 
            // Regular Expression can't use for search string format. 
            var type = Object.prototype.toString.call( searchString ); 
            if ( type === "[object RegExp]" ){ 
                    try {  throw new Error( "First argument to String.prototype." + proto + " can't be a Regular Expression" );  } 
                    catch ( error ){ 
                        error.name = "TypeError"; 
                        throw error; 
                    } 
            } 

            searchString = "" + searchString; 

            if ( searchString === "" ){  return true;  } 
            else if ( searchString.length > existingString.length ){  return false;  } 
            else {  return searchString;  } 
        }; 
    } 

    // Polyfill for String.prototype.endsWith. 
    if ( ! testEndsWith ){ 
        String.prototype.endsWith = function endsWith ( searchString, endPosition ){ 

            var string = this.toString(); 
            var searchStr = checkString( string, searchString, "endsWith" ); 
            if ( typeof searchStr != "string" ){  return searchStr;  } 

            var end = ( endPosition === undefined ) ? string.length : Math.floor( endPosition ); 
            if ( isNaN( end ) || end <= 0 ){  return false;  } 
            if ( end >= string.length ){  end = string.length;  } 

            var index = string.lastIndexOf( searchString, end ); 

            return ( index < 0 ) ? false : end === ( index + searchString.length ); 
        }; 
    } 

    // Polyfill for String.prototype.startsWith. 
    if ( ! testStartsWith ){ 
        String.prototype.startsWith = function startsWith ( searchString, startPosition ){ 

            var string = this.toString(); 
            var searchStr = checkString( string, searchString, "startsWith" ); 
            if ( typeof searchStr != "string" ){  return searchStr;  } 

            var start = ( startPosition === undefined ) ? 0 : Math.floor( startPosition ); 
            if ( start >= string.length ){  return false;  } 

            start = ( isNaN( start ) || start <= 0 ) ? 0 : start; 

            return start === string.indexOf( searchString, start ); 
        }; 
    } 

}()); 
</script>
 

---

Example 1

아래는, 가장 흔하게 사용되는 방법 중 하나이다.
Below is one of the most commonly used way.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <p id="demo2"> </p> <script type="text/javascript"> var file_1 = "picture.jpg"; var file_2 = "picture.zip"; function testing1 (){ demo1.innerHTML = example1( file_1 ); demo2.innerHTML = example1( file_2 ); } function example1 ( fileName ){ var arrExt = [ "png", "gif", "jpg" ]; var text = ""; for ( var x = 0; x < arrExt.length; x++ ){ var extension = arrExt[ x ]; if ( fileName.endsWith( extension ) ){ text = "이미지 파일이 맞습니다. "; // text = "It's an image file. "; } else { text = "이미지 파일이 아닙니다. "; // text = "It's not an image file. "; } } return text; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo3"> </p> <p id="demo4"> </p> <script type="text/javascript"> var url_3 = "http://example.org/main.html"; var url_4 = "C:\\main.html"; function testing2 (){ demo3.innerHTML = example2( url_3 ); demo4.innerHTML = example2( url_4 ); } function example2 ( url ){ var text = ""; if ( url.startsWith( "http" ) ){ text = "웹사이트에 업로드된 파일의 주소인 듯 합니다. "; // text = "It seems like the url. "; } else { text = "웹사이트 주소가 아닌 것 같습니다. "; // text = "It doesn't seem like the url. "; } return text; } </script>

위의 내용들은 그저 단순한 예문일 뿐이다.
실제로, url이 맞는지 혹은 이미지 파일인지를 확인하기 위해서는,
함수의 내용이 조금 더 명확해야 한다.

The above are only simple examples.
In practice, to determine whether it's the website URL or whether it's an image file,
the contents of the function should be a more clearly defined.

---

Example 2

1. endsWith() : 전체 문장이 내가 확인하려는 문자(문자열)로 끝나는지 아닌지를 알려준다.
2. startsWith() : 전체 문장이 내가 확인하려는 문자(문자열)로 시작하는지 아닌지를 알려준다.

1. endsWith() : It shows whether or not an entire string ends with the characters that you are checking.
2. startsWith() : It shows whether or not an entire string starts with the characters that you are checking.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.endsWith( "my blog" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.startsWith( "Hi" ); demo2.innerHTML = result; } </script>

---

Example 3

endsWith()와 startsWith()는 모두 대소문자를 구분한다.
endsWith() and startsWith() are case sensitive.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.endsWith( "My blog" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.startsWith( "hi" ); demo2.innerHTML = result; } </script>

---

Example 4

문장의 양끝으로 줄바꿈이 되어있다면, 제거하도록 한다.
If string has line breaks at the beginning and end, they need to remove.

<button onclick="testing1()"> Click me </button> <p id="myTag1">Hi everyone. Welcome to my blog</p> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = myTag1.innerHTML; var result = string.endsWith( "my blog" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="myTag2">Hi everyone. Welcome to my blog</p> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = myTag2.innerHTML; var result = string.startsWith( "Hi" ); demo2.innerHTML = result; } </script>

<button onclick="testing1()"> Click me </button> <p id="myTag1"> Hi everyone. Welcome to my blog </p> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = myTag1.innerHTML; var result = string.endsWith( "my blog" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="myTag2"> Hi everyone. Welcome to my blog </p> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = myTag2.innerHTML; var result = string.startsWith( "Hi" ); demo2.innerHTML = result; } </script>

<button onclick="testing1()"> Click me </button> <p id="myTag1"> Hi everyone. Welcome to my blog </p> <p id="demo1"> </p> <script type="text/javascript"> var trimmed = function ( str ){ return str.replace( /^\s+|\s+$/gm, "" ); }; function testing1 (){ var string = myTag1.innerHTML; string = string.trim() || trimmed( string ); var result = string.endsWith( "my blog" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="myTag2"> Hi everyone. Welcome to my blog </p> <p id="demo2"> </p> <script type="text/javascript"> var trimmed = function ( str ){ return str.replace( /^\s+|\s+$/gm, "" ); }; function testing2 (){ var string = myTag2.innerHTML; string = string.trim() || trimmed( string ); var result = string.startsWith( "Hi" ); demo2.innerHTML = result; } </script>

---

Example 5

endsWith()와 startsWith()는 문장 전체를 대상으로 한다.
endsWith() & startsWith() run on the entire string.

<button onclick="testing1()"> Click me </button> <p id="myTag1">Hi everyone. Welcome to my blog</p> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = myTag1.innerHTML; var result = string.endsWith( "everyone" ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="myTag2">Hi everyone. Welcome to my blog</p> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = myTag2.innerHTML; var result = string.startsWith( "Welcome" ); demo2.innerHTML = result; } </script>

---

Example 6

전체 문장 안에서, 원하는 위치를 따로 지정해주면, 이 두 함수는 그 위치에서부터 실행해 나간다.
Within the string, you can specify the position to start functioning.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.endsWith( "everyone", 11 ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.startsWith( "everyone", 3 ); demo2.innerHTML = result; } </script>

---

Example 7

지정한 위치값이 전체 문장의 길이보다 클 경우,

If a position value is specified greater than the length of entire string,

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.endsWith( "my blog", 40 ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.startsWith( "Hi", 40 ); demo2.innerHTML = result; } </script>

---

Example 8

확인하려는 문자열이 아무것도 없는 빈 문자열( "" )일 경우, 결과는 항상 true이다.
If the character to check for is empty string, it always returns true.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.endsWith( "", 11 ); demo1.innerHTML = result; } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; var result = string.startsWith( "", 3 ); demo2.innerHTML = result; } </script>

---

Example 9

문자열이 아닌, 정규식일 경우에는 에러가 나온다.
If the character is not a string, and it's a Regular Expression,
an error occurs.

<button onclick="testing1()"> Click me </button> <p id="demo1"> </p> <script type="text/javascript"> function testing1 (){ var string = "Hi everyone. Welcome to my blog"; try { var result = string.endsWith( /my blog/ ); } catch( error ) { demo1.innerHTML = error.message; } } </script>

<button onclick="testing2()"> Click me </button> <p id="demo2"> </p> <script type="text/javascript"> function testing2 (){ var string = "Hi everyone. Welcome to my blog"; try { var result = string.startsWith( /Hi/ ); } catch( error ) { demo2.innerHTML = error.message; } } </script>

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
If this article is helpful to you, please click the heart button below. *^^*