前提

JSで文字列の一部をパターン指定で抽出する際、matchメソッドを用いる。
このmatchメソッドの返り値は以下の2通り。

やりたいこと

マッチ結果の配列ではなく、該当した文字列を直接取得したい。
とりあえず次のようなコードを書いた。

const result = 'abc123XYZ'.match(/[0-9]{3}/)[0] // '123'

しかし、文字列の中に指定パターンが存在せずマッチしなかった場合、null[0]のような形になってしまい、エラーになる。
TypeError: Cannot read properties of null

matchメソッドの返り値を一度仮の変数に格納し、ifで分岐する

const temp = 'abc123XYZ'.match(/[0-9]{3}/)
let result
if (temp) {
  result = temp[0]
}

この解決方法はあんまりイケてない。
何度も使う場合には関数にして呼び出せばまだよいかもしれないが。

また、三項演算子を使うにしても、同じmatchメソッドを2度行うような形になってしまう。

そこで今回はよりスマートな記述方法は無いかなと考えてみた。

const resultMatched = 'abc123XYZ'.match(/[0-9]{3}/)?.[0] // '123'
const resultUnmatched = 'abcXYZ'.match(/[0-9]{3}/)?.[0] // undefined

メリットは、ワンライナーで記述できる上、可読性を考えてもまあまあ。
また、キャプチャグループを使って抽出したい場合も添え字を[1], [2]と変えれば対応できる。

const [resultMatched] = 'abc123XYZ'.match(/[0-9]{3}/) ?? [] // '123'
const [resultUnmatched] = 'abcXYZ'.match(/[0-9]{3}/) ?? [] // undefined

オプショナルチェーンを使うよりも若干読みづらい？同じくらいか？
キャプチャグループを使う場合は[, result]のように書く必要がある。
※読み手が左辺の宣言時点で認識できるよ、という言い分はあるかも？

ES20xxの新機能としてこれらの手法を知ってはいたものの、初めて実際にコードとして書くことができた。
その他もっと分かりやすいやり方がないかは検討します。