文字列には様々なメソッドがあります。
以下に少し列挙してみます。

let s = 'velo_note';
s.substring(1, 4) // 'elo'：２番目から４番目までの文字
s.slice(1, 4) // 'elo：効果は上戸同じ

s.indexOf('e') // 1：最初の'e'の位置
s.lastindexOf('e') // 8：最後の'e'の位置

s.starstWith('Velo') // false：'velo'で始まっている
s.endsWith('note') // true：'note'で終わっている

s.replace('_n','N') // 'veloNote'
s.toUpperCase() // 'VELO_NOTE'

s.chartAt(0) // 'v'：最初の文字
s.concat('!!') // 'velo_note!!'

しかし文字列は基本型のデータです。
従ってそれ自体は何の構造も持ちませんからメソッドは持っていません。
にもかかわらずメソッドが働くということは文字列からオブジェクトへの変換が行われていると言うことです。
このように Javascript の基本型は必要に応じてオブジェクトに変換されます。
この変換されたオブジェクトをラッパーオブジェクトと呼びます。
ではどんなオブジェクトに変換されているかを見てみましょう。

// 単なる文字列を作ります
const s = 'velo_note';
// String()コンストラクターで、'velo_note' を値として持つ オブジェクトを作ります
const t = new String('velo_note');

typeof s // 'string'：s のタイプは基本型の文字列です
typeof t // 'object'：t のタイプはオブジェクトです
s === t // false：そもそも型が違います
s == t // true：値は一致しています

上の t が s のラッパーオブジェクトです。
t はオブジェクトですからメソッドを持っています。
コンソールで t を評価してそれを覗いてみます。

土台に [[PrimitiveValue]] : 'velo_note'が表示され、もともとは基本型文字列の 'velo_note'であることが分かります。
次いで [[Prototype]]: String と表示された部分がありますので、これをクリックして展開されたものを表示します。

沢山のメソッドが並んでいます。
その中にはcharAt、concat、endsWith 等、冒頭で列挙したメソッドが含まれています。
これらのメソッドはこのラッパーオブジェクト t に登録されているメソッドです。

冒頭に [[Prototype]] : String とあるのは、これが new String( 'velo_note' ) を実行したときに、String( ) 関数内にあった「prototypeオブジェクト」を t へコピーしたものだという意味です。
つまり charAt、concat 等のメソッドは、もともとString( ) 関数内にあったもので、それをラッパーオブジェクトが継承したと言うことです。

この継承メソッドの中にはオブジェクトの値を表示する valueOf() もあります。
コンソールでこれを実行した結果を見てみましょう。

[[PrimitiveValue]] : 'velo_note' と表示されている内容と一致しています。
つまり 'velo_note' から作られたラッパーオブジェクト t は、その値をもち、継承メソッドを持つ、ストリング型のオブジェクトになったと言うことです。

従って例えば、s . concat( ' !! ' ) が評価されるときには、s がラッパーオブジェクト t に変換され、t の継承メソッド concat( ) を使い文字列 'velo_note!!' を返していることになります。
ラッパー(wrapper) は「wrap (包む)」、「カバーする」という意味です。

注意しなければならないのはページエレメントへの代入です。
ページエレメントでは型が区別されるからです。以下の図をご覧下さい。

Velo開発のご依頼はこちら