parseInt와 Number, substr과 substring

• 자바스크립트에는 유사한 기능을 제공하는 함수들이 있다.
• 대표적으로 parseInt와 Number, substr과 substring이 있는데, 이들이 구체적으로 어떻게 다른지 예시로 기록한다.

parseInt와 Number

const num = 10.5586;
console.log(parseInt(num)); // 10
console.log(parseFloat(num)); // 10.5586
console.log(Number(num)); // 10.5586 

const num2 = 2;
console.log(parseInt(num2)); // 2
console.log(parseFloat(num2)); // 2
console.log(Number(num2)); // 2

• parseInt는 정수로 숫자를 변환한다.
• 반면, Number는 정수 또는 실수로 숫자를 반환한다.
• Number와 비슷하게 작동하는 parseFloat가 있다.

const num = "7";
console.log(parseInt(num)); // 7
console.log(Number(num)); // 7

const num2 = "10abc";
console.log(parseInt(num2)); // 10
console.log(Number(num2)); // NaN

• parseInt와 Number 모두 문자열이라도 숫자로 반환한다.
• 하지만, Number를 사용한다면 문자열에는 숫자만 존재해야 한다.

const num = "masdk7";
console.log(parseInt(num)); // NaN

const num2 = "1ab696c";
console.log(parseInt(num2)); // 1

• parseInt가 숫자가 아닌 문자가 섞인 문자열을 숫자로 변환할 때는 처음부터 시작하며, 숫자가 아닌 문자를 만나면 변환을 중지한다.

substr과 substring

const str = "Hello Worlds";

console.log(str.substr(6)); // Worlds
console.log(str.substring(6)); // Worlds

console.log(str.substr(2, 7)); // llo Wor
console.log(str.substring(2, 7)); // llo W

• substr과 substring은 비슷하게 작동한다.
• 인자를 하나만 주면, 그 인덱스부터 끝까지의 문자열을 반환한다.
• 두 개의 인자를 주면 그 두 인덱스 사이의 문자열을 반환한다.
• 그런데, 위의 예제를 보면 substring과 substr은 미묘한 차이가 있음을 알 수 있다.
• substr과 substring의 첫 번째 인자는 시작 인덱스로 동일하다.
• 하지만, substr의 두 번째 인자는 포함될 문자의 개수이고, substring의 두 번째 인자는 끝 문자열의 인덱스이다.
  (substring의 두 번째 인자 index 전까지 포함해 문자열이 return 된다.)

const str = "I am park";

console.log(str.substr(-4, 3)); // par
console.log(str.substring(-5, -1)); // ""
console.log(str.substring(-5, 7)); // I am pa

console.log(str.substring(0, -4)); // ""

console.log(str.slice(-5, -1)); // par

• substr과 substring 모두 음수 인덱스를 사용할 수 있다.
• 하지만, substr과 substring 모두 두 번째 인자는 음수가 들어갈 수 없다.
  (애초에 substr의 두 번째 인자는 문자열의 개수이다.)
• slice를 사용하면, 두 인자 모두 음수 인덱스를 사용할 수 있다.