Javascript [ slice, substring, substr ]

양혜정·2024년 4월 13일
0

HTML/CSS/JS 실행

목록 보기
32/60

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>string 의 method 에 대해서 알아봅니다. -1</title>

<script type="text/javascript" src="js/02.js"></script>

</head>
<body>

	<h2>
		문자열.slice(startIndex, endIndex) <br>
		문자열.substring(startIndex, endIndex) <br>
		문자열.substr(startIndex, length) <br>
	</h2>
	
	<p id="slice_forward"></p>
	<p id="slice_reverse"></p>
	<p id="substring"></p>
	<p id="substr_forward1"></p>
	<p id="substr_forward2"></p>
	<p id="substr_reverse1"></p>
	<p id="substr_reverse2"></p>
	<p id="str"></p>

</body>
</html>

JS

window.onload = function(){
    /*
        자바스크립트에서 문자열을 발췌하여 리턴하는 메소드는 3가지가 있다.
        3가지 모두 원본 문자열은 그대로 변경되지 않고 그대로 유지하게 된다.
    
        1. "문자열".slice(startIndex, endIndex)
        ===> 문자열에서 startIndex 부터 endIndex 앞 까지만 발췌하여 리턴해준다.
            역방향을 사용시 startIndex 와 endIndex 에 -를 사용하면 된다.  
    */
    const str = "Apple, Banana, Kiwi";

    let part = str.slice(7, 13);    // 7번째글자부터 12까지(13의 앞까지) => Banana
    document.getElementById("slice_forward").innerHTML = part; // Banana
    
    part = str.slice(-12, -6); // Banana
    
    document.getElementById("slice_reverse").innerHTML = part;
    
    /*
        2. "문자열".substring(startIndex, endIndex)
        ===> 문자열에서 startIndex 부터 endIndex 앞 까지만 발췌하여 리턴해준다.
            위의 slice 와 같지만 차이점은 - 를 사용하여 역방향을 사용할 수 없다는 것이다.
    */

    part = str.substring(7, 13);    // 7번째글자부터 12까지(13의 앞까지) => Banana
    document.getElementById("substring").innerHTML = part; // Banana

    /*
        3. "문자열".substr(startIndex, length)
        ===> 문자열에서 startIndex 부터 length 길이만큼 발췌하여 리턴해준다.
            출발점을 역방향으로 하려면 -startIndex 을 사용하면 된다.
            
        ===> "문자열".substr(startIndex) 
            문자열에서 startIndex 부터 문자열 끝까지 발췌하여 리턴해준다.
            출발점을 역방향으로 하려면 -startIndex 을 사용하면 된다.
  */

        // - 가 뜨는이유는 사용되지만 권장 X
        part = str.substr(7,6);     // 7번째글자부터 6글자 => Banana    
        document.getElementById("substr_forward1").innerHTML = part; // Banana

        part = str.substr(7);       // 7번째글자부터 끝까지 => Banana, Kiwi    
        document.getElementById("substr_forward2").innerHTML = part; // Banana, Kiwi

        part = str.substr(-12,6);   // 뒤에서 12번째글자부터 6글자 => Banana    
        document.getElementById("substr_reverse1").innerHTML = part; // Banana

        part = str.substr(-12);     // 뒤에서 12번째글자부터 끝까지  => Banana, Kiwi    
        document.getElementById("substr_reverse2").innerHTML = part; // Banana, Kiwi

        document.getElementById("str").innerHTML = str;

}

정리

  • 06_string
    -> 02_string_method_1, 02.js
profile
양혜정
이전 포스트

Javascript [ " , ' ]

다음 포스트

Javascript [ replace ]

0개의 댓글

관련 채용 정보