String

[azu]

#17 基本文法

Stringオブジェクト

[azu]

• UTF-16
• indexOf
• includes
• match 正規表現

[azu]

What every JavaScript developer should know about Unicode
詳しくて良い

[yumetodo]

#106 はどうなりますかね？

[azu]

まだどうするか考え中な感じですが、StringとArrayを並べて考えようとしてます。
(実際に対比するというよりは、説明の流れを似せるだけという話ですが)
この２つは似ている部分と異なる部分があるので、似ている部分は似たような流れで紹介して、異なる部分は異なるということを示しながら進めるんじゃなかなーと思います。

似ている部分としては、追加、削除、探索(indexOf、includes)など
(似ているかと言われると微妙ですが、同じ名前のAPIだったり話の流れとしては似たようなものになるかもという直感的なものです)

異なる部分として、プリミティブと参照型だったり色々ありますが、
配列では array[n] でn番目の要素にアクセスできるけど、文字列では string[n] で n番目の文字とは?という話になると思います。(具体的には "🚧"[0] の結果はどうなる?とか)
ここで、Code Pointとか #106 の話がでてくるような気がします。

ただ、ちゃんと扱おうと思うとJavaScriptの標準APIでは微妙に足りない感じがするのでどこまで踏み込むかが微妙な感じです…
(Effective JavaScriptだと2ページぐらいでこの辺の話が書かれてて、これでもかなりすっきりとしてるなという印象なので、真面目に書くと結構たいへんそうだなと思っています)

というのをArrayのコード例を色々書いていて思った感じです。 #49

[azu]

Tagged Templateの課題で、safe property access とか結構面白いかもと思った(処理を限定させれば結構シンプルに書けるかも)
azu/azu#78

[azu]

「文字数」ってなぁに？〜String, NSString, Unicodeの基本〜 // Speaker Deck

[azu]

"𠮟る".length; // => 3
叱ると𠮟るがあるのか

[yumetodo]

FAQ - Characters and Combining Marks#How are characters counted when measuring the length or position of a character in a string?

Unicode公式の文字の定義計4パターン

[azu]

絵文字のlength Emoji.prototype.length — a tale of characters in Unicode - Contentful

[azu]

テンプレートリテラル ここに含めると微妙に関数が先にあって欲しいみたいなことがおきるんだな。

テンプレート文字列の概念をまとめると

• テンプレート文字列
  • テンプレートリテラル
  • タグ付きテンプレートリテラル

という関係になるはず。
表記も統一しないと。

@laco0416 ↑の表記に統一かな? (個人的にはTemplate literalとかそのまま使うの好きだけど、中途半端になりそうだし)

• テンプレート文字列 - JavaScript | MDN
  • MDNはやや半端なんだな

[azu]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring

String#slice と String#substring ってどういう理由で２つあるんだろ?
JavaScriptの仕様的にどちらも破壊的じゃないし、同等のことは表現できるだろうし。
この使い分けってあるのかな?
(説明としてどちら(とも)を出すのかが迷う感じ)

[azu]

SubstrとAnnex Bの話
https://esdiscuss.org/topic/moving-string-prototype-substr-to-normative-part-of-the-spec

[azu]

sliceとsubstringの違いを出すには - をつかうケースで、典型的なのは0桁埋めだったけど、
今ならString#padStartで解決できてしまう ということに気づいてしまった。

• 四章第一回　文字列の操作 — JavaScript初級者から中級者になろう — uhyohyo.net

[azu]

https://github.com/asciidwango/js-primer/blob/master/source/OUTLINE.md#string
この章のメインテーマとしては、目的の文字列を組み立てる方法を学ぶという所に集約しそう。
そのために文字とは何かとか文字列操作の方法とかを見ていく感じ。
(具体的に目的の文字列としていい感じのものがまだないけど。タグ付きテンプレートを説明しようと思ったら思った以上に難しかった)

[azu]

タグ付きテンプレートの典型的なユースケースはやっぱりHTMLエスケープなのかな。
Ajaxのところでも出てくるので、ここでは仕組みを上手く解説できるといいのだけど。
題材はHTMLエスケープ以外だとなんかいい感じのあるのかな

• テンプレート文字列 - JavaScript | MDN
• JavaScript の テンプレートリテラル を極める！ - Qiita
• Template Literals are Strictly Better Strings
• New string features in ECMAScript 6
• Getting Literal With ES6 Template Strings  |  Web  |  Google Developers
• 8. Template literals

[azu]

Unicode周り 詳しくはMathiasさん参照みたいな感じになるかなー
combining marksあたりになると、物理的に印刷が正しくできるのか不安になるレベル。
(ECMAScriptの範疇じゃなくてUnicodeの話になってしまうし)

• 26. Unicode in ES6
• JavaScript has a Unicode problem · Mathias Bynens

多くのケースでは直にこの問題を扱わないで、事前に正規化を書けて扱いやすくしたものを扱うはずなので、普通にプログラミングする範囲では知りたいときに調べる感じになるものだと思う。

• Regexp.ja · neologd/mecab-ipadic-neologd Wiki

combining marksはString#normalizeで正規化できないので、正しく説明するのが単純に難しい感じ。

code unit, code pointあたりは、JavaScriptのAPIとして扱う方法が存在するので、APIを使いつつ説明できる範囲にしておくのがちょうどいい感じかなと思った。

[yumetodo]

いや、Unicodeを真面目に考えれば、正規化なんて甘えで、ひとつのコードポイントで一文字を表そうとするのが傲慢ということでは・・・。たまたま等価な(等価の定義がまた面倒)コードポイントひとつに変換できる場合の変換が正規化なのであって。
もちろんECMAScriptの範疇じゃなくなるので、正規化は例えば検索(比較)可能性の向上のために等価な文字を同じコードポイントで表すように変換するためにあるのであって、combining characterを1codepointで表すためのものではない、と言及するに留めるしかないと思いますが。

combining marksあたりになると、物理的に印刷が正しくできるのか不安になるレベル。

あ・・・

[azu]

いつも忘れるのでメモ。

var str = "x\uD83D\uDE80y";
console.log("\\u" + str.codePointAt(0).toString(16));
console.log("\\u" + str.codePointAt(1).toString(16));
console.log("\\u" + str.codePointAt(3).toString(16));
// code unit
console.log("\\u" + str.charCodeAt(0).toString(16));
console.log("\\u" + str.charCodeAt(1).toString(16));
console.log("\\u" + str.charCodeAt(2).toString(16));
console.log("\\u" + str.charCodeAt(3).toString(16));

via http://www.2ality.com/2015/01/es6-strings.html

[azu]

StringとRegExp 改めて仕様読んでてたけど、関係がもっと深いな。
String#methodはRegExp#[SymbolMethod]として使うことができるのか

https://tc39.github.io/ecma262/#sec-properties-of-the-regexp-prototype-object

"ab".split(/a*?/)
/a*?/[Symbol.split]("ab")

みたいにかける

[azu]

#183 これを書き直すといいのかも。
Symbolで対となる表現が存在するという話を書くだけ(実際には使わない)
関係性の深さを意識として置いておきたい。後将来的にSymbolの活用例として

[azu]

String#split

• https://tc39.github.io/ecma262/#sec-string.prototype.split
• "".split("") の場合は code unit 要素ごとに分割される

The value of separator may be an empty String. In this case, separator does not match the empty substring at the beginning or end of the input String, nor does it match the empty substring at the end of the previous separator match. If separator is the empty String, the String is split up into individual code unit elements; the length of the result array equals the length of the String, and each substring contains one code unit.

"文字列".split("").join("") は絵文字がきた段階で破綻する。
Array.fromや...でましになるけど、結合文字まで考えるとそこは自前でやる必要があるやつ。

• mathiasbynens/esrever: A Unicode-aware string reverser written in JavaScript.
• JavaScript has a Unicode problem · Mathias Bynens

[azu]

Java @ プログラマのための文字コード技術入門より

[azu]

文字数(正確にはcode point) みたいな言い回しするのが難しさを出してる感じがする

この辺はJavaScriptも後付のCode Pointなので似たような内容

[azu]

文字列の比較

https://github.com/asciidwango/js-primer/blob/master/source/OUTLINE.md#string
stringの比較は === ぐらいかな?
> < >= <= 一応書くけど、sortとセット以外で使わない感じがするな。
この辺の仕様を見て、そのアルゴリズムをJavaScriptで書いてみるのが分かりやすいのかな?

"100" > "20" ; // false

[azu]

String.prototype.localeCompare() - JavaScript | MDN
Intl.Collator.prototype.compare - JavaScript | MDN

i18nのcompareもそういえば今なら使えるのか。
i18n API自体がこなれてない感じなので、これを含めるか難しいな。(微妙に使えない環境あるし)

[azu]

文字列比較の === のアルゴリズム

If x and y are exactly the same sequence of code units (same length and same code units at corresponding indices), return true; otherwise, return false.
-- https://tc39.github.io/ecma262/#sec-samevaluenonnumber

なので、code unitが同じ並びになっていて同じ長さかというもの

[azu]

C#とかSwiftでのUnicode周りの話

プログラミング言語における文字コードの話 | ++C++; // 未確認飛行 C ブログ

[azu]

http://qiita.com/teyosh/items/b126f21a16b795885067#intlcollator
言語によって文字列の比較結果は異なるため、i18nの機能を使ってL10Nをしないと求める結果は得ることができない。

[azu]

配列の場合は特定の要素を探すということをするが、文字列から特定の文字1つを探すということはあまりしない。

代わりに特定の文字の並びを探すということを行うため、その文字集合へのマッチ方法が重視されることが多い。そこで役立つのが文字集合を特殊文字として表現できる正規表現。

StringとRegExpは内部的に同じ処理を共有しているため、別のオブジェクトではあるがとても密接な存在である。

[azu]

Jonathan New | "💩".length === 2

❤️ のlengthの例

[azu]

• sindresorhus/strip-indent: Strip leading whitespace from each line in a string
• https://github.com/declandewet/common-tags#stripindent

カスタムタグテンプレート インデント消すやつとか、正規表現も混ざって面白いかも

stripIndent`
 class YourStore extends Store {
    getState(){
      return {
          yourStore: this.state
      };
    }
 }
`;

[azu]

i18nタグがいいかも？
数値の複数形とか

[azu]

文字単位の分割i18n APIの分かち書きでできるのかなー。
結合文字とかもいい感じに分割してくれるのかな

• tc39/proposal-intl-segmenter: Unicode text segmentation for ECMAScript

[azu]

javascript - JavaScriptで絵文字の正確な長さを取得する - スタック・オーバーフロー
https://github.com/tc39/proposal-intl-segmenter に近いものとしてV8はそういうIteratorにするやつが生えてるのか

[azu]

Regular Expressions in a post-ES6 world
named captureを踏まえて、execとかは単純な配列じゃないということを明記しておいたほうがいいのかも

[azu]

#225 構造的な文字列 = ドメイン固有言語的な表現にしたほうがいいかも。
URL文字列もドメイン固有言語といえるのかな。

[azu]

テンプレートリテラル周りの用語整理

Name	Code
タグ関数(tag function)	String.raw`template`
タグ付きテンプレート(Tagged Templates)	String.raw`template`
テンプレートリテラル(Template Literals)	`template`
テンプレート文字列(TemplateStrings)	`template` (`の中の文字列)

8. Template literals 過去の仕様だとTemplte Stringが違う名前だったりしてややこしいけど、これであってるのかな?

[azu]

zeeshanu/learn-regex: Learn regex the easy way

正規表現について簡単にまとまっててよさそう。
リンクを追加するかなー