の文字列への変換

これは
ここでは、文字列を配列にする4つの方法を説明しています.

JavaScriptの配列に文字列を変換する4つの方法

マリア・アントラ🦋 ・ 8月18日・ 1分読む

#javascript #beginners #webdev #programming

しかし、すべての4つの方法は、同じ方法で動作します.このような文字列を使用しようとすると、これを見ることができます'💩' , ラテン文字列ではなく、

const str = '💩'

str.split('') // ["\ud83d", "\udca9"]

;[...str] // ["💩"]

Array.from(str) // ["💩"]

Object.assign([], str) // ["\ud83d", "\udca9"]

なぜ違い？

違いを理解するために、それぞれの方法が順番にどのように動作するかを見てみましょう.

弦

String#split UTF - 16でエンコードされた16ビット単位でマッチし、分割します.
これらのユニットは、文字列インデックス表記法を使用して何を見つけることができますし、それらを使用してカウントすることができますString#length :

'ab'[0] // "a"
'ab'[1] // "b"
'ab'.length // 2

'💩'[0] // "\ud83d"
'💩'[1] // "\udca9"
'💩'.length // 2

ご覧の通り、何か変なことがあります.それはemojisと他の様々な文字のため、1つの代わりに2つの16ビット単位(合計32ビット)を取る.
したがって、String#split , 彼らは得るsplit 真下に、それらの個々の16ビット単位に.私たちの絵文字を構成する16ビット単位は適切な文字ではないので、JavaScriptコンソールはUnicodeエスケープ表記でそれらを表示します\uXXXX , 各X は16進数です.

オブジェクト。代入

どうやってObject.assign 仕事?

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object. (Source: MDN)

この場合、source is '💩' , and target is [] . Object.assign したがって、割り当て'💩' 'Sプロパティ0 配列のプロパティに0 and '💩' 'Sプロパティ1 配列のプロパティに1 . 結果として、我々はString#split — これらのインデックスで見つかる個々の16ビット単位.

……広がる

スプレッド演算子... ) はES 6で導入された.ES 6機能の導入により、JavaScriptは、そのUnicode処理を賢く取得し始めた.
プロパティを代入する代わりに、スプレッド演算子はオペランドを繰り返します-この場合、文字列.文字列反復処理は、個々の16ビット単位ではなく、Unicode CodePointに基づいて行われます.私たちのフレンドリーなpoop絵文字は単一のUnicodeコードポイントですので、我々は必要な結果を得る.

配列。から

スプレッド表記と同様にArray.from はES 6で導入された.この関数は渡された引数を繰り返します.

警告

Array.from そして、スプレッド表記法はUnicode CodePointにとって素晴らしい仕事です、しかし、彼らはまだあらゆる状況をカバーしません.時々、単一のグリフのように見えるものは実際に複数のUnicodeコードポイントです.例えば、

const str1 = 'lǜ'
const str2 = str1.normalize('NFD')
// "lǜ", looks exactly the same, but composed with combining diacritics

;[...str1] // ["l", "ǜ"]
;[...str2] // ["l", "u", "̈", "̀"]

または別の絵文字ベースの例です.

const emoji = '👩🏿‍💻'

;[...emoji] // ["👩", "🏿", "‍", "💻"]

ここで、絵文字が実際に4つのUnicode CodePointから構成されているためですwoman , skin tone 6 , zero-width joiner , and computer それぞれ.

更なる読書

より深いダイビングのために、私は非常にMatthiasJavaScript has a Unicode problem .
読書ありがとう!あなたの好きなUnicodeのヒントやトリックやJavaScriptユニコードGotchasは何ですか?