JavaScript에서 파일 이름 확장명 가져오기

1. JavaScript에서 .split() 및 .pop() 메서드를 사용하여 파일 확장자 가져오기
2. JavaScript의 .substr() 메소드를 사용하여 파일 확장자 가져오기
3. JavaScript에서 .slice() 메소드를 사용하여 파일 확장자 가져오기
4. ES6 오브젝트 소멸 방법으로 파일 확장자 가져오기

파일 이름에는 확장자가 있어 운영 체제와 사용자가 파일 형식을 식별하는 데 도움이 됩니다. 대부분의 확장자는 3자이지만 때로는 더 길 수도 있습니다. 예를 들어, .doc, .xls, .ppt와 같은 이전 Microsoft Office 확장은 이전에 3자였지만 .docx, .xlsx, .pptx와 같은 최신 확장 는 4자입니다. 내장된 자바스크립트 메서드를 사용하여 파일 이름에서 확장 부분을 추출하는 몇 가지 방법을 살펴보겠습니다.

JavaScript에서 .split() 및 .pop() 메서드를 사용하여 파일 확장자 가져오기

.split() 함수는 문자열을 문자열 배열로 분할합니다. 함수에 첫 번째 매개변수로 전달된 일부 패턴을 기반으로 문자열을 하위 문자열의 배열로 나눕니다. 그리고 .pop()은 배열의 마지막 요소를 제거하고 반환하는 자바스크립트의 내장 함수입니다. 따라서 이러한 방법을 조합하여 파일 이름에서 확장자를 가져올 수 있습니다. 사용법을 이해하기 위해 다음 코드를 살펴보겠습니다.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.split('.').pop());
console.log(file2.split('.').pop());

출력:

txt
xlsx

코드에서 .split(".") 함수를 사용하여 파일 이름 문자열을 .으로 분할합니다. 여러 조각으로 나누기 위해. .pop() 함수는 깨진 파일 이름 배열의 마지막 값을 반환합니다. JavaScript .pop() 함수는 우리가 적용할 문자열 배열을 변경합니다.

이 접근 방식은 여러 . 그들에서. .split(".").pop()은 분할 파일 이름의 마지막 부분을 반환합니다. 따라서 주어진 파일 이름에서 파일 확장자를 얻는 것은 현명한 방법입니다.

JavaScript의 .substr() 메소드를 사용하여 파일 확장자 가져오기

파일 이름을 추출하기 위해 파일 이름 문자열을 다룰 때 문자열 연산을 사용합니다. 확장자를 얻는 또 다른 방법은 substr() 함수를 사용하는 것입니다. 이름에서 알 수 있듯이 substring() 함수는 이 함수에 매개변수로 전달된 인덱스로 정의된 문자열의 일부를 반환합니다. 시작 색인과 종료 색인의 두 매개변수를 사용합니다. 이 함수는 시작 색인의 문자를 포함하고 종료 색인의 문자를 제외한 시작 색인과 끝 색인 사이의 문자열을 반환합니다. 따라서 파일 확장자를 추출하기 위해 substring 함수를 사용할 수 있습니다. 다음 코드를 참조하십시오.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.substr(-3));
console.log(file2.substr(-4));

출력:

txt
xlsx

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.substr((file1.lastIndexOf('.') + 1 - file1.length)));
console.log(file2.substr((file2.lastIndexOf('.') + 1 - file2.length)));

출력:

txt
xlsx

JavaScript에서 .slice() 메소드를 사용하여 파일 확장자 가져오기

우리는 파일 이름에 대한 문자열 데이터 유형을 다루고 있습니다. 따라서 string 연산자를 적용할 수 있습니다. 그러한 연산자 중 하나는 .slice()입니다. substr() 함수와 유사하게 작동하며 start index 및 end index로 정의된 배열 섹션을 반환합니다. slice() 함수에 하나의 값만 전달하면 해당 인덱스 값을 start index로 간주합니다. 그리고 그 지점에서 문자열을 반환합니다. 슬라이스를 사용하여 파일 확장자를 얻으려면 다음 코드를 참조하십시오.

let file1 = 'somefile.txt';
let file2 = 'somefile.xlsx';
console.log(file1.slice(((file1.lastIndexOf('.') - 1) + 2)));
console.log(file2.slice(((file2.lastIndexOf('.') - 1) + 2)));

출력:

txt
xlsx

.slice() 함수는 우리가 적용한 문자열을 변조하지 않습니다. 따라서 예약 없이 간편하게 방법을 사용할 수 있습니다. 또한 파일 이름 문자열에서 파일 확장명을 추출하는 더 빠른 방법입니다.

ES6 오브젝트 소멸 방법으로 파일 확장자 가져오기

객체 파괴는 ES6 표준에 도입된 새로운 기능입니다. 이를 통해 JavaScript 개체를 열고 이러한 속성을 변수에 바인딩할 수 있습니다. 파일 이름에서 확장자를 가져오는 데 사용할 수 있습니다. 다음 코드를 참조하십시오.

let file1 = 'somefile.txt';
const [ext, ...fileName] = file1.split('.').reverse();
console.log(ext);

출력:

txt

코드는 자바스크립트의 split(".") 함수를 사용하여 "."를 사용하여 파일 이름을 분할하여 파일 이름 부분의 배열을 가져옵니다. 여기에는 .split() 함수에 의해 출력된 배열의 다른 인덱스에 반환된 파일 이름과 확장자가 포함됩니다. .reverse() 메서드는 우리가 적용한 배열을 뒤집습니다. 반전된 배열의 첫 번째 요소는 확장 값을 보유합니다. ES6 자바스크립트의 자바스크립트 객체 구조 분해 메커니즘을 사용하여 [ext, ...fileName]에서 ext 변수를 추가로 추출합니다. 마지막으로 ext를 기록하여 파일 확장자를 얻을 수 있습니다.