문자열 자르기와 관련된 함수 (substr, substring, slice)

substr

💡 substr은 새로운 웹사이트에서는 더이상 사용되지 않는다. 웹 표준에서 제거된 것은 아니지만 다른 매서드로 대체하는 것이 바람직하다.

문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환한다.

const str = 'hello'

console.log(str.substr(1, 2))
// expected output: "el"

console.log(str.substr(2))
// expected output: "llo"

str.substr(start[, length])
str.substr(시작위치의 인덱스, 추출한 문자의 length )

• start 값이 양수이고, 문자열 전체 길이보다 크거나 같으면 빈 문자열을 반환한다.
• start가 음수이면 문자열 끝에서 start 숫자만큼 뺀 곳에서 시작한다.
• start가 음수이고, 절대값이 문자열 전체보다 크면 문자열의 0번째 인덱스부터 시작
• length가 0 이거나 음수이면 빈 문자열 반환한다.
• length가 생략되었다면 문자열의 끝까지 추출하여 반환한다.

const str = 'helloworld'

str.substr(1, 2)
// 1번째 index에서 2개 추출
// expected output:'el'
str.substr(-3, 2)
// 전체 문자열 길이 10에서 -3만큼 뺀 곳에서 시작하여 2개 추출
// expected output:'rl'
str.substr(-3)
// start가 음수이므로 전체 문자열 길리 10에서 -3만큼 뺀 곳에서 시작,
// length는 생략되었으므로 문자열의 끝까지 추출
// expected output:'rld'
str.substr(1)
// 1번째 인덱스에서 시작하여 length는 생략되었으므로 문자열의 끝까지 추출
// expected output:'elloworld'
str.substr(-20, 2)
// start가 음수이고, 절대값이 문자열 전체보다 크면 문자열의 0번째 인덱스부터 시작하여 2개 추출
// expected output:'he'
str.substr(20, 2)
// start가 양수이나 문자열 전체 길이보다 크기 때문에 빈 문자열 반환
// expected output:''

---

substring

시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환

const str = 'hello'

console.log(str.substr(1, 3))
// expected output: "el"

console.log(str.substr(2))
// expected output: "llo"

str.substring(indexStart[, indexEnd])
str.substring(시작 인덱스, 마지막 인덱스(포함하지 않음))
return 값: 기존문자열의 부분 문자열

• 시작 인덱스부터 문자를 추출하여 마지막 인덱스가 포함되지 않아도 된다.
• indexEnd가 생략되었다면 문자열 끝까지 모든 문자를 추출한다.
• indexStart, indexEnd가 같을 경우 빈 문자열을 반환한다.
• indexStart가 indexEnd보다 클 경우 두 개의 인자를 바꾼 것처럼 작동한다.
• 0보다 작은 인자 값을 가지면 0, stringName.length보다 큰 인자값을 가지면 stringName.length로 처리된다.
• NaN 값은 0으로 처리된다.

const anyString = 'helloworld'

// Displays 'h'
console.log(anyString.substring(0, 1))
//indexStart가 indexEnd보다 클 경우 substring(0, 1)처럼 두 개의 인자를 바꾼듯이 작동한다.
console.log(anyString.substring(1, 0))

// Displays 'hello'
console.log(anyString.substring(0, 6))

//Displays 'world'
console.log(anyString.substring(5))

//Displays 'wo'
console.log(anyString.substring(4, 7))
//indexStart가 indexEnd보다 클 경우 substring(4, 7)처럼 두 개의 인자를 바꾼듯이 작동한다.
console.log(anyString.substring(7, 4))

// Displays 'helloworld'
console.log(anyString.substring(0, 10))
//stringName.length보다 큰 인자값을 가지면 stringName.length로 처리된다.
console.log(anyString.substring(0, 15))

substring()와 length 속성을 같이 사용하기

// Displays 'orld' the last 4 characters
const anyString = 'helloworld'
const anyString4 = anyString.substring(anyString.length - 4)
console.log(anyString4)

// Displays 'world' the last 5 characters
const anyString = 'helloworld'
const anyString5 = anyString.substring(anyString.length - 5)
console.log(anyString5)

substring 메서드와 length 송성을 사용하여 특정 문자열의 마지막 문자를 추출할 수 있다. 이 방법을 사용하면 anyString.substring(4, 7)과 같이 시작인덱스와 마지막인덱스를 알지 않아도 된다.

substring()와 substr()의 차이점

substring()와 substr()에는 미묘한 차이가 있으므로 주의해야 한다. substring()은 시작과 마지막 인덱스를 의미하는데, substr()은 시작인덱스와 반환된 문자열에 포함할 문자 수를 나타낸다.

• str.substring(indexStart[, indexEnd])
• str.substr(start[, length])

const text = 'helloworld'
//2번째 인덱스에서 시작하여 5번째 인덱스 전까지 추출
console.log(text.substring(2, 5)) // => "llo"
//2번째 인덱스에서 시작하여 3개까지 추출
console.log(text.substr(2, 3)) // => "llo"

substring()와 slice()의 차이점

substring()와 slice()는 거의 똑같은데, 미묘하게 다른 점이 존재한다. 특히 부정적인 인수를 처리하는 방식에 차이가 있다.

• substring(): indexStart가 indexEnd보다 클 경우 두 가지 인수를 바꾼듯이 작동한다.
• slice(): indexStart가 indexEnd보다 클 경우 빈 문자열을 반환한다.

const text = 'helloworld'
//indexStart가 indexEnd보다 크기 때문에 text.substring(2,5)처럼 작동한다.
console.log(text.substring(5, 2)) // => "llo"
//indexStart가 indexEnd보다 크기 때문에 빈문자열을 반환한다.
console.log(text.slice(5, 2)) // => ""

두 가지 인수 모두 음수거나 NaN인 경우, substring()

• substring(): 두 가지 인수 모두 음수거나 NaN인 경우 인수가 0인 것처럼 처리한다.

//substring(0, 2)인 것처럼 처리
console.log(text.substring(-5, 2)) // => "he"
//substring(0)인 것처럼 처리
console.log(text.substring(-5, -2)) // => ""

• slice(): 두 가지 인수 모두 음수거나 NaN인 경우 NaN인수는 0처럼 취급하지만, 음수일 때는 문자열 끝에서 역방향으로 계산한다.

//text.slice(0,0)처럼 취급
console.log(text.slice(-5, 2)) // => ""

// indexStart가 -5이므로 문자열 길이 10 - 5의 5번째에서 시작
// indexEnd가 -2이므로 문자열 길이 10에서 10 - 2의 8번째에서 추출 종료.
// text.slice(5, 8)과 같은 결과
console.log(text.slice(-5, -2)) // => "wor"

---

slice

문자열의 일부를 추출하면서 새로운 문자열을 반환하기 때문에 다른 문자열에 영향을 미치지 않으며, 마지막 인덱스 직전까지 추출한다.

const str = 'The quick brown fox jumps over the lazy dog.'

console.log(str.slice(31))
// expected output: "the lazy dog."

console.log(str.slice(4, 19))
// expected output: "quick brown fox"

console.log(str.slice(-4))
// expected output: "dog."

console.log(str.slice(-9, -5))
// expected output: "lazy"

str.slice(beginIndex[, endIndex])
str.slice(추출시작점 인덱스[, 종료인덱스, 주어진 인덱스 직전까지 추출])
return 값 : 추출된 부분을 담는 새로운 문자열

• beginIndex
  • 음수가 올 경우, strLength(문자열 길이) + beginIndex로 취급 (e.g. beginIndex가 -3이면 시작점은 strLength -3)
  • beginIndex가 strLength보다 크면 빈 문자열 반환
• endIndex
  • 추출 종료점 인덱스 위치의 문자는 추출에 포함되지 않고, 그 직전까지 추출된다.
  • endIndex가 생략되었다면 문자열 마지막까지 추출한다.
  • 음수라면 endIndex는 strLength + endIndex로 취급된다. (e.g. endInedx가 -3이면 종료점은 strLength -3)

const str1 = 'The morning is upon us.', // the length of str1 is 23.
  str2 = str1.slice(1, 8),
  str3 = str1.slice(4, -2),
  str4 = str1.slice(12),
  str5 = str1.slice(30)

console.log(str2) // OUTPUT: he morn
console.log(str3) // OUTPUT: morning is upon u
console.log(str4) // OUTPUT: is upon us.
console.log(str5) // OUTPUT: ""

//slice는 새로운 문자열은 반환하기 때문에 str1은 그대로이다.
console.log(str1) // OUTPUT: The morning is upon us.

음수 인덱스로 slice()사용

const str = 'The morning is upon us.'
str.slice(-3) // returns 'us.'
str.slice(-3, -1) // returns 'us'
str.slice(0, -1) // returns 'The morning is upon us'

• beginIndex가 음수일 때
  beginIndex는 문자열의 끝에서부터 역방향으로 11개를 세고, endIndex는 시작점부터 순방향으로 16개를 센다.

console.log(str.slice(-11, 16)) // => "is u";

• endIndex가 음수일 때
  beginIndex는 문자열의 시작점부터 순방향으로 11개를 세고, endIndex는 끝에서부터 역방향으로 7개를 센다.

console.log(str.slice(11, -7)) // => "is u";

• beginIndex, endIndex 모두 음수일 때
  beginIndex는 끝에서부터 5까지 역순으로 계산하여 시작인덱스를 찾았고, 끝에서부터 1까지 역순으로 계산하여 마지막 인덱스를 찾는다. beginIndex가 -5이므로 문자열 길이 23 - 5의 18번째에서 시작한다. endIndex는 -1이므로 문자열 길이 23에서 23 - 1의 22번째에서 추출을 종료한다.

console.log(str.slice(-5, -1)) // => "n us";

---

References
String.prototype.substr()
String.prototype.substring()
String.prototype.slice()