勉強記録(2024/09/06)スプレッド演算子とサロゲートペア

使用教材

https://www.sbcr.jp/product/4815615758/

職業訓練校で使用していたもの。
引き続きこちら。

勉強内容

スプレッド演算子

文字数カウント。絵文字など一部の文字をlengthだけでカウントすると1文字でも2文字になるので、回避のためにスプレッド演算子という書き方を使うらしい。

こちらが分かりやすかった。

配列でない、とは

…の前に、途中出てきたfluit5がなぜ1文字ずつになるか確認。
[ ]でくくられてない(=配列でない)からみたい。
"ぶどう"部分にtextという定数を””無しで入れたら「is not iterable」とエラーが出た。このエラーは、配列などのループできる内容以外が入ってると出てくるらしい。
console.logで確認したら<textarea id="text"></textarea>と出てくる。
が、これは多分扱いとして文字列等とは別なんだろうな。

console.log(...text.value);

だと

1文字ずつになった

ちなみにarrayでむりやり配列にしてみると

console.log(Array.from(text));
空っぽ

<textarea id="text"></textarea>が出てくるかと思ってたけど出なかった。
arrayについては特にふわふわ知識だから、あとで勉強しないと。

なぜ絵文字は1文字にならないのか

閑話(でもないけど)休題。
ただ、このページだと絵文字等が2文字になる理由がわからない。

調べたら2文字どころじゃなかった。

教材通りのやり方だとこちら。
ほかにもやり方はあるらしいけど、さすがに今は手が出ない…。

console.log([...'😇']);
配列にすると1文字扱いになった

…ところでこれはどういう入力をすれば有効になるんだろう。if文?でもそれなら'😇'.length === 1;とかのほうが…?

現状ではシンプルな対応方法はなさそう...。

https://qiita.com/hamakou108/items/d387383610b0c76b5ade

具体的なやり方を書かれてる記事↓

今後シンプルな対処法とかも出てくるのかな。
というわけで残りページの文字数による表示変更までやって、今日の分終わり。


この記事が気に入ったらサポートをしてみませんか?