본문 바로가기
언어/Javascript, Typescript

[TypeScript] Object(객체)를 입력받아 values의 길이가 너무 긴 것을 "[values 글자 수 제한] + ... "로 바꾸기

by minhyeok.lee 2023. 4. 5.
반응형

[Next.js, ts, js] 객체의 values 길이 제한을 둬  "[values 글자 수 제한] + ... "으로 필터링하기

// 제한하고싶은 글자수 길이
let MAXLENGTH = 15;

// 일반 함수식 + any타입을 제거하면 js에서 사용가능
export const dataLengthFilter: any = (list: any) => {
  for (let i = 0; i < list.length; i++) {
    for (const key in list[i]) {
      const values = list[i][key];
      if (values.length > MAXLENGTH) {
        console.log(i, key, values.slice(0, MAXLENGTH-1));
        list[i][key] = values.slice(0, MAXLENGTH-1) + "...";
      }
    }
  }
  return list;
};

1. 위 코드를 사용하면 객체의 values가 너무 길 경우 적절한 함수로 처리해줄 수 있다.

2. 예를 들어 123456789123456789일때 12345678912345...으로 줄여준다.

3. 이는 Front-end에서 데이터를 표시할 때 데이터가 너무 길 경우 CSS속성을 변경하지 않고 해결할 수 있다.

4. word-break속성 (break-all: 문자를 강제로 줄바꿈, normal: 일반적인 규칙으로 줄바꿈, kepp-all: 문자 쌍 사이에 줄바꿈이 금지)을 주지않고 함수로 처리한다.

반응형

댓글