MENU

JavaScript文字列操作関数・メソッド

【JavaScript】 replaceのコールバックでawaitを使いたい

更新日:2021/10/07

 

JavaScriptのreplaceメソッドを使用すると、文字列の一部を置換することができます。
このreplaceメソッド内で外部ファイルを参照するなど、非同期メソッドをawaitキーワードで使用したいことがあります。

 

しかしエラーが出て処理が止まってしまいます。
どうしてでしょうか?
対処方法はあるのでしょうか?

 

replaceのコールバック内でawaitできない!

 

async関数内でPromiseオブジェクトにawaitを使用すると、その結果が出るのを待ってくれます。

 

async関数内でPromiseオブジェクトにawaitを使用

 


const awaitFunc = (t)=>{
    return new Promise(resolve =>
        setTimeout(()=>resolve(t.toUpperCase())
            ,3000 )
    )
}

const test = async (t)=>{
    const result = await awaitFunc( t );
    console.log( result );
}

test("abcde"); // "ABCDE"

 

awaitFuncは、非同期で実行される関数です。
ここでは3秒後に小文字のアルファベットが大文字に変換されるという、あまり意味がないことをやっていますが、外部ファイルの読み込みなどの処理が想定されます。

 

このawaitFuncとreplaceを使用して、特定の文字だけ変換してみます。

 

replaceのコールバック内でawait

 


const test = async (t)=>{
    const result = t.replace( /[cd]/g,(...m)=>{
        return  await awaitFunc(m[0]);
    });
    console.log( result );
}

test("abcde");
// SyntaxError: await is only valid in async functions, async generators and modules

 

「awaitは、async関数、asyncジェネレーター、およびモジュールでのみ有効です」という意味のエラーが出てしまいました。

 

async関数内でawaitを使っているのに、何が悪いのでしょうか。

エラーになる理由

 

実はコールバック関数は、async関数内で実行されていません。

 

async関数内を実行しているのは、replaceなのです。

 

イメージ的には次のような感じです。

 

String.replace = function( serchText , callback ){
     // ・・・何らかの処理
     callback( 引数 );
     // ・・・何らかの処理
}

 

replaceにはasyncキーワードが使用されていないので、前述のエラーがでてしまったのです。

解決方法は?

 

結論から言うと、replace内でawaitは使用できません。

 

仕方がないので、少し発想を変えます。

 

まず変換対象の文字を重複しない文字列に置き換えます。
そのとき、マッチ情報を保管しておきます。

 

次に保管したマッチ情報をforループで処理し、一時的に置き換えた文字と置き換えます。
forループ内ではawaitを使用できるのです。

 

replace内でawaitを使わない

 


const test = async (t)=>{
    const replaceWord = n =>`[[[[${n}]]]]`;
    let count=0;
    const buff = [];

       // 重複しない文字で置き換える
    let result = t.replace( /[cd]/g,(...m)=>{
        buff.push( m ); // マッチ情報の補完
        return  replaceWord(count ++);
    });

       // マッチ情報をforループで処理
    for( let i = 0 ; i < count ; i ++ ){
        const data = buff[i];
        const m = await awaitFunc(data[0]);
        result = result.replace(replaceWord(i),m);
    }
    console.log( result );
}

test("abcde"); // "abCDe"

 

けーちゃんおススメJavaScript入門書

  • スラスラ読める JavaScript ふりがなプログラミング
  • プログラム未経験者がJavaScript始めるならコレ!
    コードを掲載して自分で理解しろという投げっぱなしな入門書とは異なり、コードに一つ一つどんなことをやっているかをふりがなという形式で解説しています。
    それでいてJavaScriptの基礎と応用を学べる良書です。
  • これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
  • JavaScriptの機能を実践で活かすにはHTMLやCSSの知識が不可欠です。
    しかしそれらの知識があることが前提として書かれている書籍が多い中、この本は総合的な知識を身に着けることができます。
    HTMLやCSSの知識も不安な方には、ぴったりの一冊です
  •  

    入門書の役割は、自分のやりたいことをネットで調べることができるようになるための、基礎的な知識の獲得です。
    まずはこれらの本でしっかりと基礎知識を身につけましょう。
    そしてもっと高度なことや専門的なことはネットで調べ、情報が足りないと感じたら書籍を購入してください。


    記事の内容について

     

    こんにちはけーちゃんです。
    説明するのって難しいですね。


    「なんか言ってることおかしくない?」
    たぶん、こんなご意見あると思います。

    裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

    そんなときは、ご意見もらえたら嬉しいです。

    ご意見はこちら。
    https://note.affi-sapo-sv.com/info.php

    【お願い】

    お願い

    ■このページのURL


    ■このページのタイトル


    ■リンクタグ


    ※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
    サイト上部の問い合わせよりご連絡ください。
    ただしサイトのジャンルによっては、お断りさせていただくことがあります。