slice( )/substring( )/substr( )

문자열 메서드 - slice( )/substring( )/substr( )

문자열에서 원하는 값을 추출하는 메서드입니다.

매서드	설명	차이점
slice( )	문자열에서 원하는 값을 추출하여 문자열을 반환합니다	▶ "문자열".slice(시작위치) or "문자열"slice(시작위치, 끝나는위치) ▶ 시작위치의 값은 끝나는 위치의 값보다 작아야 합니다.
substring( )		▶ "문자열"substring(시작위치, 끝나는위치) ▶ 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지)
substr( )		▶ "문자열".substr(시작위치) or "문자열".substr(시작위치, 길이)

---

1. 문자열 메서드 : slice( )

문자열을 추출하는 메서드는 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환합니다.

slice( )의 숫자는 문자열에서 절대적인 위치를 나타내며 첫번째 숫자는 문자열의 좌측부터 해당 숫자 만큼 이동 후 출력을 시작합니다. 두번째 숫자는 시작 위치부터 지정한 숫자 위치 만큼만 출력하도록 합니다. 따라서 시작값이 끝나는 값보다 반드시 작아야 합니다.
음수값일 경우 뒤에서부터(우측) 시작하며, 좌측으로 갈수록 값이 작아집니다.

{
    const str1 = "javascript reference"
    const currentStr1 = str1.slice(0);          //javascript reference
    const currentStr2 = str1.slice(1);          //avascript reference
    const currentStr3 = str1.slice(2);          //vascript reference
    const currentStr4 = str1.slice(0, 1);       //j
    const currentStr5 = str1.slice(0, 2);       //ja
    const currentStr6 = str1.slice(0, 3);       //jav
    const currentStr7 = str1.slice(1, 2);       //a
    const currentStr8 = str1.slice(1, 3);       //av
    const currentStr9 = str1.slice(1, 4);       //avs
    const currentStr10 = str1.slice(-1);        //e         ※음수는 뒤에서부터 시작
    const currentStr11 = str1.slice(-2);        //ce         
    const currentStr12 = str1.slice(-3);        //nce         
    const currentStr13 = str1.slice(-3, -1);    //nc        ※-1이 -3보다 더 크기 때문에 -3, -1이라 써야한다.  
    const currentStr14 = str1.slice(-3, -2);    //n
    const currentStr15 = str1.slice(-3, -3);    //''
}

2. 문자열 메서드 : substring( )

substring( )은 slice( )과 기본적으로 같으나 에러를 방지하기 위해 숫자의 위치를 자동으로 바꿔줍니다.

{
    const currentStr16 = str1.slice(1, 4); //ava
    const currentStr17 = str1.slice(4, 1); //''
    const currentStr18 = str1.substring(4, 1); //ava
    const currentStr19 = str1.substring(1, 4); //ava        //substring은 자동으로 순서를 바꿔줌
}

3. 문자열 메서드 : substr( )

substr( )은 slice( )처럼 첫번째 값이 시작값으로 같으나 두번째 숫자가 길이를 나타내는 차이점이 있습니다.
두번째 숫자만큼 나타낼 문자열 수를 나타내기에 시작값보다 클 필요가 없습니다.

{
    const currentStr20 = str1.substr(0); //javascript reference
    const currentStr21 = str1.substr(1); //avascript reference
    const currentStr22 = str1.substr(2); //vascript reference
    const currentStr23 = str1.substr(0, 1); //j
    const currentStr24 = str1.substr(0, 2); //ja
    const currentStr25 = str1.substr(0, 3); //jav
    const currentStr26 = str1.substr(1, 2); //av
    const currentStr27 = str1.substr(1, 3); //ava
    const currentStr28 = str1.substr(1, 4); //avas
    const currentStr29 = str1.substr(-1); //e
    const currentStr30 = str1.substr(-2); //ce
    const currentStr31 = str1.substr(-3); //nce
    const currentStr32 = str1.substr(-1, 1); //e
    const currentStr33 = str1.substr(-2, 2); //ce
    const currentStr34 = str1.substr(-3, 3); //nce
}