Javascript TransformStream이 문자열을 변환하는 방법

최근 세 브라우저 엔진(Chrome, Safari, Firefox) 모두 TransformStream API을 지원하기 시작했습니다.

TransformStream을 사용하면 수신, 전송 또는 작은 청크로 변환하려는 리소스를 분해한 다음 이러한 청크를 비트 단위로 처리할 수 있습니다. 최근에 Firefox 102가 지원하기 시작했습니다TransformStream. 이는 TransformStream이 마침내 여러 브라우저에서 사용할 수 있음을 의미합니다. 변환 스트림을 사용하면 ReadableStream에서 WritableStream으로 파이프를 연결하여 청크에서 변환을 실행하거나 변환된 결과를 직접 사용할 수 있습니다.

아래 예에 따라 텍스트 파일 내용을 대문자 형식으로 변환하는 방법을 보여줍니다.



먼저, 문자열 덩어리를 대문자로 변환하는 역할을 하는 새로운 TransformStream 인스턴스를 반환하는 UpperCaseTransformStream 클래스를 선언했습니다.

class UpperCaseTransformStream {
    constructor() {
        return new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk.toUpperCase());
            },
        });
    }
}

그런 다음 Convert 버튼에 리스너를 추가하여 파일 내용을 읽고 UpperCaseTransformStream을 통해 전달합니다.

button.addEventListener('click', async () => {
    var file = document.getElementById('fileForUpload').files[0];
    if (file) {
        var fileReader = new FileReader();
        fileReader.readAsText(file, 'UTF-8');
        window.selectedFile = file;

        fileReader.onload = async function (evt) {
            const res = new Response(evt.target.result);

            const readableStream = res.body
                .pipeThrough(new TextDecoderStream())
                .pipeThrough(new UpperCaseTransformStream());

            const reader = readableStream.getReader();
            let results = '';
            while (true) {
                const { done, value } = await reader.read();
                if (done) {
                    break;
                }
                results += value;
            }
            document.querySelector('pre').innerHTML = results;
            window.contentToDownload = results;
        };
        fileReader.onerror = function (evt) {
            document.querySelector('pre').innerHTML = 'Error reading the file';
        };
    }
});

이 과정이 완료되면 대문자로 변환된 내용이 화면에 출력되는 것을 볼 수 있습니다.

Original article link.