JavaScript 유용한 함수: String Object 7개 정리

Array는 이전 글을 읽고 참조하시면 됩니다. 이 포스트에선 자바스크립트 String, Object 유용한 함수를 소개합니다.


String

split


문자열을 분할하여 배열로 만들기


const date = `2020/02/23`;
const result = date.split('/');

console.log(result); // ["2020", "02", "23"]


split하여 분할 후, 다시 합치려면 join을 사용.

concat

문자열에 다른 문자열을 연결하여 새로운 문자열을 만듭니다


const str1 = `Hello.`;
const str2 = `World!`;
const result = str1.concat(str2);

console.log(result); // > "Hello.World!"


startsWith


문자열 앞 부분이 지정된 문자열로 시작하는지 확인


const str = `Hello.World!`;
const result = str.startsWith('Hel');

console.log(result); // true


includes


문자열에 특정 문자열이 포함되어 있는지 확인


const str = `Tom and Jerry are cat and rat.`;
const result = str.includes('at');

console.log(result); // true

trim


문자열 끝에 있는 공백, 줄 바꿈(LF CR), 공백, 탭 등을 제거


const str = `   Hello!!






`;
const result = str.trim();

console.log(result); // "Hello!!"


padStart


문자열 길이를 지정하고, 특정 문자열로 채우기


/**
* # padStart
* targetLength : 문자열 길이.
  현재 문자열의 길이보다 짧다면, 현재 문자열 반환
* padString : 문자열.
  targetLength 보다 긴 경우 오른쪽부터
  그 길이 만큼 잘린다 (없어진다)
*/

'targetString'.padStart(targetLengthpadString);


5자리로 지정하고 빈 부분은 앞쪽부터 *로 채움


const targetString = 'abc';
const result = targetString.padStart(5'*');

console.log(result); // **abc


5자리로 지정하고 빈 부분은 앞쪽부터 12345 문자열에서 가져와 채움


const targetString = 'abc';
const result = targetString.padStart(5'12345');

console.log(result); // 12abc


targetString + padString이 지정한 자리수보다 긴 경우, padString 오른쪽에서 그 길이만큼 잘립니다.

12345abc->12abc

Object

entries

  • 객체를 배열로 변환
    • Object {key: value} -> Array [key, value]
  • Object 지만 배열을 수정하고 싶을 때 유용한 함수



객체를 배열로 변환

Object.entries 한번에 객체를 배열로 변환


const animals = {
  dog'wan-wan',
  cat'nya-n',
  fox'kon-kon'
};

const result = Object.entries(animals);
console.log(result);
//  [
//    ["dog", "wan-wan"],
//    ["cat", "nya-n"],
//    ["fox", "kon-kon"],
//  ]


위와 같은 형태로 많이 사용하지만, 아쉬면도 있습니다.

기본적으로 Object.entries 에서 배열로 만든 뒤, map을 활용해 코드의 유연성을 높이는 게 좋습니다.


Object.entries 와 map 결합


const animals = {
  dog'wan-wan',
  cat'nya-n',
  fox'kon-kon',
};

const result = Object.entries(animals).map(([keyvalue]) => ({
  namekey,
  cryvalue,
}));

console.log(result);
// [
//   {
//     name: "dog",
//     cry: "wan-wan",
//   },
//   {
//     name: "cat",
//     cry: "nya-n",
//   },
//   {
//     name: "fox",
//     cry: "kon-kon",
//   },
// ];


사용하기 쉬운 형태가 되었네요.


: link : 인용 및 참고

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object


정리

  • 1년 이상 자바스크립트 코드를 쓰지 않은 상태
    • 머리가 리셋 되었기 때문에 새로운 관점에서 코드를 볼 수 있었습니다. (긍정적)
    • 휴가는 좋은 겁니다.


끝까지 읽어 주셔서 감사합니다!


댓글(0)

Designed by JB FACTORY