📂 JAVASCRIPT/String
[ 자바스크립트 ] 문자열에서의 endsWith() & startsWith() 사용법 🕔 2016. 10. 20. 01:21
최종 수정일 : 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. *^^*
'JAVASCRIPT > String' 카테고리의 다른 글
| [ 자바스크립트 ] charCodeAt VS codePointAt (0) | 2017.05.07 |
|---|---|
| [ 자바스크립트 ] 문자열에서의 repeat() 사용법 (0) | 2016.10.27 |
| [ 자바스크립트 ] 문자열에서의 includes() 사용법 (0) | 2016.10.26 |
| [ 자바스크립트 ] substr() (2) | 2016.09.11 |
| [ 자바스크립트 ] trim() (0) | 2016.01.08 |