👩🏻‍💻 replace()

replace()
replace() 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다. 그 패턴은 문자열이나 정규식(RegExp)이 될 수 있으며, 교체 문자열은 문자열이나 모든 매치에 대해서 호출된 함수일 수 있습니다.

📌 String Formatting를 특정 문자열로 반환하기

프로젝트를 진행하면서 String Formatting을 특정 문자열로 반환하는 로직을 짰어야 했었다.
예를들어 가나다%@바사라는 문자열이 있으면 %@부분을 특정 문자열로 반환을 해야 했다.

<Title>
  {text.replace(정규식|부분 문자열, 새로운 부분 문자열|함수)}
</Title>

replace 함수는 문자열 내의 가장 첫 번째로 찾은 부분 문자열만 새로운 부분 문자열로 변경시켜준다. 따라서 문자열 내부의 전체 부분 문자열에 적용하기 위해서는 정규표현식을 사용해야 한다.

<Title>
  {text.replace('%@', 새로운 부분 문자열|함수)}
</Title>

%@을 새로운 문자열로 바꿔야 하므로 정규식|부분 문자열에 작성을 해줬다.
그리고 새로운 부분 문자열|함수 부분에는 배열의 특정값을 찾는 함수를 작성하였고 예외처리도 해주었다. 이 때 배열에 특정값을 찾는 find()와 문자열을 반환하는 toString()을 이용하였다.

<Title>
  {text.replace(
   '%@',
   arr.find((replaceText) => replaceText.id === id)?.text.toString() || '',
  )}
</Title>

이 글에는 생략되었지만 이미 Title이라는 상위 DOM에서 map이 돌고 있었고, find함수로 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환할 수 있도록 로직을 짰다.

참고

arr.find(callback(element, index, array), thisArg)

MDN을 적극적으로 활용하면 문제 될 게 없다!