JavaScript에서 파일 이름의 확장자 앞에 단어를 삽입하는 방법

JavaScript로 작업하다 보면 파일 이름의 확장자 앞에 특정 단어를 삽입해야 하는 경우가 있습니다. 예를 들어 demo.js라는 파일 이름을 demo-programming.js처럼 변경하는 것이죠. 이번 글에서는 이를 간단하게 구현하는 방법을 알아보겠습니다.

문제 상황

먼저 다음과 같은 원본 파일 이름이 있다고 가정해 보겠습니다.

var actualJavaScriptFileName = "demo.js";

그리고 확장자 앞에 삽입하고 싶은 단어는 다음과 같습니다.

var addValueBetweenFileNameAndExtensions = "programming";

해결 방법

핵심 아이디어는 두 가지입니다.

1. split()으로 파일 이름 분리하기

파일 이름을 점(.)을 기준으로 split()

2. 템플릿 리터럴(Template Literal)로 문자열 조합하기

분리된 값들 사이에 원하는 단어를 넣고, 백틱(`)을 사용한 템플릿 리터럴 문법으로 새로운 파일 이름을 만들 수 있습니다.

예제 코드

var addValueBetweenFileNameAndExtensions = "programming";
var actualJavaScriptFileName = "demo.js";
console.log("원본 파일 이름 = " + actualJavaScriptFileName);

// 점(.)을 기준으로 파일 이름과 확장자를 분리
var [fileName, fileExtension] = actualJavaScriptFileName.split('.');

console.log("단어 삽입 후 파일 이름 = ");
console.log(`${fileName}-${addValueBetweenFileNameAndExtensions}.${fileExtension}`);

실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다.

node fileName.js

출력 결과

여기서는 파일 이름이 demo.js인 경우를 가정했습니다. 위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

PS C:\Users\Amit\JavaScript-code> node demo.js
원본 파일 이름 = demo.js
단어 삽입 후 파일 이름 =
demo-programming.js

코드 설명

split('.')'은 문자열을 점(.) 기준으로 잘라 배열을 반환하며, 구조 분해 할당(Destructuring Assignment)을 통해 첫 번째 요소는 fileName에, 두 번째 요소는 fileExtension에 저장됩니다. 그런 다음 템플릿 리터럴 안에서 세 값을 하이픈(-)과 점(.)으로 연결하여 최종 파일 이름을 완성합니다.

이 방식은 코드가 짧고 직관적이어서 파일 이름을 동적으로 생성하거나 수정해야 하는 다양한 상황에서 유용하게 활용할 수 있습니다.