긴 문자열을 다듬는 깔끔한 JS 함수

이 문서에서는 UI 구성 요소를 망칠 수 있는 긴 문자열이 있을 때마다 사용할 방법을 찾을 수 있습니다.

나는 프로젝트의 목록 항목 구성 요소를 작업하고 있었고 우리가 많이 겪는 문제를 발견했습니다. 내가 가지고 있는 것은 제목, 게시 날짜 및 에피소드 설명을 가져오는 카드 목록입니다. 구성 요소 자체에서 문자열을 수동으로 트리밍하는 대신 즉석에서 문자열을 트리밍할 수 있다면 어떨까요? 이는 React JS 및 Vue와 같은 JS 프레임워크로 작업할 때 특히 유용합니다.



각 에피소드의 설명 길이는 간행물마다 다릅니다. 설명이 이 카드 구성 요소에서 원하는 한도를 넘어설 것이라고 확신합니다. 그러면 내 카드 목록의 높이가 모두 달라집니다. 나는 대칭을 좋아하기 때문에 이러한 설명 문자열을 즉석에서 다듬어야 했습니다. 다음은 내가 한 방법과 여러 가지 방법 중 하나입니다.

function truncate(string, characterLimit) {
/* first argument, pass in a string */
/* optional second argument: pass in a character 
      limit for this string. */
/* reminder: ?? is a nullish coalescing operator. 
      if we find that the 2nd argument passed in is 
      null or undefined, we default the character limit 
      to 160 characters */
  let limit = characterLimit ?? 160;
/* set up a variable called finalString to return at the end.  */
  let finalString;
/* if condition that asks if the string character count is 
       greater than or equal to the limit variable. if it is then 
       we want to remove everything after the number of the 
       limit set and append ellipse ("...") */
  if (string.length >= limit) {
    finalString = string.substring(0, limit);
    finalString = finalString + "...";
  } else {
/* if the string is less than or equal to the limit, let's go 
       ahead and pass the string by assigning it to our 
       finalString variable */
    finalString = string;
  }
  return finalString;
}

이 방법을 사용할 때 어떤 일이 발생하는지 살펴보겠습니다.

const shortDescription = "If a parsley farmer gets sued, can they garnish his wages?"

const longDescription = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. Suspendisse ultricies odio ac turpis porta volutpat. Vestibulum rhoncus laoreet elit ut dictum. Ut id lorem ut ipsum cursus eleifend sed vitae dui. Mauris commodo elit at leo consectetur, ut blandit lacus laoreet. Vivamus placerat congue consectetur. Vivamus non nisi a tortor aliquet dictum. Sed ut condimentum nunc. In hac habitasse platea dictumst. Praesent id egestas libero. Vivamus sed tellus orci. Ut luctus mauris nunc, pulvinar bibendum urna dictum non. Duis bibendum commodo arcu, ut elementum diam vulputate vitae."

truncate(longDescription)
/* "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. 
Suspendisse ultricies odio ac turpis porta v..." */

truncate(longDescription, 250)
/* "Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam ex ante, molestie eu nisl non, tempor rutrum tortor. 
Suspendisse ultricies odio ac turpis porta volutpat. Vestibulum 
rhoncus laoreet elit ut dictum. Ut id lorem ut ipsum cursus 
eleifend s..." */

truncate(shortDescription)
/* "If a parsley farmer gets sued, can they garnish his wages?" */

shortDescription.length
/* 58
58 is less than the default 160 limit, so the string is passed 
through unmodified */

따라서 이 기능은 긴 복사 설명을 다듬을 뿐만 아니라 제한을 전달하여 설정한 기본 제한을 재정의할 수도 있습니다. 이제 매우 민첩해지는 함수를 작성했기 때문에 이것은 매우 편리합니다. 예를 들어, 작업 중인 이 고정 오디오 플레이어 막대에서 동일한 자르기 기능을 사용했습니다. 에피소드 제목이 잘리는 것을 알 수 있습니다.



함수를 작성할 때마다 하나의 책임이 있는지 확인하되 필요에 따라 사용자 정의를 허용하십시오.

이제 UI에서 긴 설명을 다듬는 한 가지 방법이 있습니다. 프로그램의 다른 영역에서도 향후 사용을 고려하는 함수를 작성하는 방법을 살펴보았습니다.

이 방정식을 어떻게 처리하시겠습니까? 아래에서 솔루션을 공유하십시오.

읽어주셔서 감사합니다.

사진 제공: Les Triconautes on Unsplash