TIL 220725 문자열 메소드(string method), 숫자 메소드(number method)

---

문자열 메소드(string method)

String()

매개변수로 받은 값을 문자열로 전환

console.log(String(2)); // "2"
console.log(typeOf(String(2))); // string

 

str.length

문자열의 길이를 반환

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(txt.length); // 26

 

str.split()

매개변수로 넣어준 값을 기준으로 문자열을 나눠 배열로 반환

활용 ) 이메일, -가 있는 전화번호

let fruits = "apple,banana,grape";
let fruit = fruits.split(",");
console.log(fruit); // ['apple', 'banana', 'grape']

 

string.slice(indexStart, [indexEnd])

indexStart부터 indexEnd 앞까지 문자열의 부분을 반환

let number = "12345678910987654321";

number.slice(0, 5); // 0번 인덱스부터 문자부터 4번 인덱스까지(5번 인덱스 앞까지)
number.slice(9, -3); // 9번 인덱스부터 뒤에서 3개를 제외하고
number.slice(8); // 8번 인덱스부터 끝까지

console.log(number.slice(0, 5)); // "12345"
console.log(number.slice(9, -3)); // "10987654"
console.log(number.slice(8)); // "910987654321"

 

string.substring(indexStart, [indexEnd])

indexStart부터 indexEnd 앞까지 문자열의 부분을 반환

let number = "12345678910987654321";

number.substring(0, 5); // 0번 인덱스 문자부터 4번 인덱스까지(5번 인덱스 앞까지)
number.substring(9); // 9번 인덱스부터 끝까지

console.log(number.substring(0, 5)); // "12345"
console.log(number.substring(8)); // "910987654321"

---

slice와 substring의 차이점

if (indexStart >  indexEnd) 일 때

// if (indexStart >  indexEnd)
let number = "12345678910987654321";

let slice = number.slice(1, 0);
let substring = number.substring(1, 0);

console.log(slice); // ""
console.log(substring); // "1"

slice는 빈문자열을 반환하고

substring은 값을 바꾸어서 처리한다.

number.substring(1, 0) == number.substring(0, 1)

---

if ((indexStart < 0) || (indexEnd < 0)) 일 때

let number = "12345678910987654321";

let slice = number.slice(-8, 13); 
let substring = number.substring(-8, 13);

console.log(slice); // "8"
console.log(substring); // "1234567891098"

slice는 가장 뒤에서 음수의 절대값만큼 내려와 index로 취급한다.

number.slice(-8, 13)  == number.slice(12, 13)

substring은 indexStart나 indexEnd가 음수인 경우 0으로 취급한다.

number.substring(-8, 13) ==number.substring(0, 13) 

---

slice의 IndexStart가 string 전체 길이보다 큰 음수일 때 

let number = "12345678910987654321";

let slice = number.slice(-20, 5); // "12345"
console.log(slice);

slice는 음수를 0으로 처리한다.

number.slice(-20, 5) == number.slice(0, 5);

 

 

string.substr(indexStart, [length])

indexStart부터 length만큼 문자열의 부분을 반환

let number = "12345678910987654321";

number.substr(0, 5); // 0번 인덱스 문자부터 5개의 문자
number.substr(9); // 9번 인덱스부터 끝까지
console.log(number.substr(0, 5)); // "12345"
console.log(number.substr(0, 6)); // "123456"
console.log(number.substr(9)); // "10987654321"

더 이상 웹표준이 아님!

---

string.includes()

하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고 결과를 boolean값으로 반환

let useLanguage = "I can speak Japanese and English.";

console.log(useLanguage.includes("English")); // true
console.log(useLanguage.includes("Chinese")); // false

 

string.trim()

문자열의 좌우 공백을 제거 후 반환

let greeting = "           hi !               ";
console.log(greeting); // "           hi !               "
let trim = greeting.trim();
console.log(trim); // "hi !"

 

string.toLowerCase()

문자를 모두 소문자로

 

string.toUpperCase()

문자를 모두 대문자로

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let lowertxt = txt.toLowerCase();
console.log(lowertxt); // "abcdefghijklmnopqrstuvwxyz"

let uppertxt = lowertxt.toUpperCase();
console.log(uppertxt); // "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

 

string.concat()

호출 문자열에 매개변수로 전달된 모든 문자열을 붙인 새로운 문자열을 반환

let greeting = "hi!";
let everyone = " everyone";
let hnd = ". Have a nice day.";
console.log(greeting.concat(everyone, hnd)); // "hi! everyone. Have a nice day."

 

concat() 메소드보다 연산자 +, +=를 사용하는게 더 좋다. 연산자를 사용하는게 속도가 몇 배 빠르다.

console.log(greeting.concat(everyone, hnd));
console.log(greeting + everyone + hnd); // 이게 속도가 더 빠름

---

---

숫자 메소드(number method)

 

변수를 숫자로 변환하는 메소드

---

Number(string)

인자를 숫자로 반환

console.log(Number("123")); // 123
console.log(Number("unicorn")); // NaN
console.log(Number("1000원")); // NaN => 문자열이 숫자가 아닌 경우 NaN 반환
console.log(Number("1.234")); // 1.234 => 소수점까지 모두 표현

 

parseInt(string,[n])

인자를 정수로 반환, n을 입력하면 n진법의 값으로 바꾼다.

console.log(parseInt("123")); // 123
console.log(parseInt("unicorn")); // NaN
console.log(parseInt("1000원")); // 1000 => 숫자로 시작하는 경우 : 숫자가 끝날 때까지만 형변환하여 반환
console.log(parseInt("가격 : 1000원")); // NaN => 문자로 시작하는 경우 : NaN 반환
console.log(parseInt("1.234")); // 1 => 정수까지만 반환
console.log(parseInt("1111", 2)); // 15 => 2진법 숫자로으로 변환

 

parseFloat(string)

인자를 소수점까지 반환

console.log(parseFloat("123")); // 123
console.log(parseFloat("unicorn")); // NaN
console.log(parseFloat("1000원")); // 1000 => 숫자로 시작하는 경우 : 숫자가 끝날 때까지만 형변환하여 반환
console.log(parseFloat("가격 : 1000원")); // NaN => 문자로 시작하는 경우 : NaN 반환
console.log(parseFloat("1.234")); // 1.234 => 소수점까지 모두 표현

---

 

number.toFixed([digits])

숫자를 고정 소수점 표기법으로 표시, digits : 소수점 뒤에 나타날 자릿수. 0이상 20이하의 값을 사용할 수 있다. (설정하지 않을 시 0)

let numObj = 123.4567;

console.log(numObj.toFixed()); // '123' => 반올림하며, 소수 부분을 남기지 않음
console.log(numObj.toFixed(1)); // '123.5' => 반올림
console.log(numObj.toFixed(6)); // '123.456700' => 빈공간을 0으로 채움

console.log(-(2.34).toFixed(1)); // -2.3 => 연산자의 적용이 우선이기 때문에, 음수의 경우 문자열로 반환하지 않음
console.log((-2.34).toFixed(1)); // '-2.3' => 괄호를 사용할 경우 문자열을 반환
console.log(typeof -(2.34).toFixed(1)); // number
console.log(typeof (-2.34).toFixed(1)); // string

 

Math.Random()

0 이상 1 미만의 부동소숫점 의사 난수를 반환

Math.random();

// 두 값 사이의 난수를 생성하는 함수 getRandomArbitrary
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

 

Math.ceil()

주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자 (== 올림)

console.log(Math.ceil(0.95)); //1
console.log(Math.ceil(4)); // 4
console.log(Math.ceil(7.004)); // 8

 

Math.floor()

주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환 (== 버림)

console.log(Math.floor(5.95)); // 5
console.log(Math.floor(5.05)); // 5

 

Math.round()

입력값을 반올림한 수와 가장 가까운 정수 값을 반환 (== 반올림)

console.log(Math.round(18.49)); // 18
console.log(Math.round(20.5)); // 21
console.log(Math.round(42)); // 42

---

자주 사용되는 문자 메소드와 숫자 메소드를 정리하는 시간을 가졌다. 공부하고 나니 slice와 substring에 대한 '어차피 둘 다 두 번째 파라미터의 앞 인덱스까지만 반환하는 것도 같으면서 왜 쓸데없이 2개나 있을까'하는 의문이 해소되었다.

전에 유튜브 강의에서 본 substr메소드가 MDN에서 더 이상 웹표준이 아닌 것을 보니 항상 변화에 발맞춰 최신 정보들을 알고 있어야 되겠다고 생각했다. 그리고 다시 한 번 공식문서의 이점을 느꼈다. 공식문서에는 상황별 예제가 다 있다! 이리저리 구글을 떠돌며 찾아보지 않고도 공식문서를 읽은 뒤 이해가 안가는 부분만 따로 검색하면 공부 시간을 줄일 수 있다. 진짜 영어는 싫지만 공식문서는 최고!