Mac OSでファイル名の濁点が一文字として扱われる場合の対処法（JavaScript編）

はじめに

先日、JavaScriptでファイルアップロード処理を実装していたところ、ファイル名が以下のように表示されてしまいました。

アッフ゜ ロート゛ したファイル.csv

元のファイル名は「アップロードしたファイル.csv」だったのですが、濁点、半濁点が一文字として扱われている状態です。今回はこちらをJavaScript(TypeScript)で解消する方法をまとめました。

前提条件

・Mac OSのPCを使っている
・アップロードしたファイルはuploadedFileで保持している

解消方法

uploadedFile.name.normalize('NFC');

// 使用例
const fileName = uploadedFile.name.normalize('NFC');
if (fileName.includes('アップロード')) {
    return;
}

原因

Mac OSではファイル名を「NFD(Normalization Form Canonical Decomposition)」という形式で正規化しています。Decompositionという名前の通り、濁点や半濁点は一文字として扱われます。今回はこちらのファイル名を「NFC(Normalization Form Canonical Composition)」という形式で正規化し直すことで、「ト゛ 」を「ド」の一文字扱えるようになりました。