프론트엔드 개발에 유용한 유틸함수들 1. truncateString (

/** @param content : 들어갈내용
 * @param number : 자를 글자수
 */
 
export function truncateString(content: string, number: number) {
  // 문자열 길이가 16 초과일 경우
  if (content?.length > number) {
    // 처음 16글자를 가져오고 말줄임표(...)를 추가
    return content.substring(0, number) + "...";
  }
  // 길이가 16 미만이면 원본 문자열 반환
  return content;
}

 

활용 팁

반응형 처리와 함께 유용하게 사용할 수 있음.

// React

...

const isTablet = useMediaQuery({
    query: "(max-width:1023px)",
  });
const isMobile = useMediaQuery("(max-width:768px)");
...

return (

<Tooltip title={content}>
	<span>{truncateString(content, isMobile ? 11 : isTablet? 18 : 33)}</span>
</Tooltip>

 

보통 특정 길이 이상의 문자열에 말 줄임표를 쓰는 경우, tooltip으로 감싸서 마우스 hover시 전체 문자열을 쓸 수 있도록 사용하는데, 

몇 글자에서 자를지를 window의 width에 따라 (react-responsive 사용하면 짱편함) 결정할 수 있다.