【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"
更新日：2021/10/07
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
