[ 자바스크립트 ] 문자열에서의 includes() 사용법 🕔 2016. 10. 26. 10:18
최종 수정일 : 2016. 10. 27
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 ] includes() in the string
- Polyfill
- Example 1 : 기본 예문
- Example 2 : includes()는 대소문자를 구분한다.
- Example 3 : 문장 안에서, 실행할 위치를 따로 설정할 수 있다.
- Example 4 : 위치의 최대 허용 값은 그 문장의 전체 길이값이다.
- Example 5 : 위치값이 음수일 경우, 그 위치값은 0(zero)으로 계산된다.
- Example 6 : 인수가 빈 문자열이면, 결과는 항상 true이다.
- Example 7 : 인수가 정규식이면, 에러가 발생한다.
Polyfill
<script type="text/javascript">
// source : https://tonks.tistory.com/167#_javascript_string_includes
if ( ! String.prototype.includes ){
String.prototype.includes = function includes ( searchString, startPosition ){
if ( Object.prototype.toString.call( searchString ) === "[object RegExp]" ){
try { throw new Error( "First argument to String.prototype.includes can't be a regular expression" ); }
catch ( error ){
error.name = "TypeError";
throw error;
}
}
return this.toString().indexOf( searchString, startPosition ) > -1;
};
}
</script>
Example 1
includes()는 확인하려는 문자(문자열)이 전체 문장 안에 들어있는지 아닌지를 알려준다.
The includes() shows whether or not an entire string contains 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.includes( "everyone" );
demo1.innerHTML = result;
}
</script>
|
<button onclick="testing2()"> Click me </button>
<p id="demo2"> </p>
<script type="text/javascript">
function testing2 (){
var string = "This post number is 167.";
var result = string.includes( 167 );
demo2.innerHTML = result;
}
</script>
|
Example 2
includes()는 대소문자를 구분한다.
The includes() is 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.includes( "welcome" );
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.includes( "Welcome" );
demo2.innerHTML = result;
}
</script>
|
Example 3
전체 문장 안에서, 시작할 위치를 따로 지정해주면, includes()는 그 위치에서부터 실행해 나간다.
Within the entire 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.includes( "everyone", 3 );
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.includes( "everyone", "3" );
demo2.innerHTML = result;
}
</script>
|
Example 4
지정한 위치값이 전체 문장의 길이보다 클 경우,
그 문장의 바깥에서 함수를 시작하라는 뜻이 돼버리므로, 결과는 항상 false이다.
If a position value is specified greater than the length of entire string, it always returns false.
Because it means that you want to start functioning, beyond the end of a 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.includes( "blog.", 33 );
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.includes( "post", 33 );
demo2.innerHTML = result;
}
</script>
|
Example 5
지정한 위치값이 음수일 경우,
위치값은 0(zero)으로 계산되며, 전체 문장의 맨 앞에서부터 확인해나간다.
If a position value is a negative number, the position value is changed to zero(0).
<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.includes( "everyone", -5 );
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.includes( "everyone", "-5" );
demo2.innerHTML = result;
}
</script>
|
Example 6
확인하려는 문자열이 아무것도 없는 빈 문자열( "" )일 경우, 결과는 항상 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.includes( "", 5 );
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.includes( "", -5 );
demo2.innerHTML = result;
}
</script>
|
Example 7
문자열이 아닌, 정규식일 경우에는 에러가 나온다.
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.includes( /everyone/ ); }
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.includes( /everyone/, -5 ); }
catch( error ) { demo2.innerHTML = error.message; }
}
</script>
|
https://tonks.tistory.com/167#_javascript_string_includes
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*
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 |
| [ 자바스크립트 ] 문자열에서의 endsWith() & startsWith() 사용법 (0) | 2016.10.20 |
| [ 자바스크립트 ] substr() (2) | 2016.09.11 |
| [ 자바스크립트 ] trim() (0) | 2016.01.08 |