質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • JavaScript

    15967questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScript 配列について

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 481

Behemoth

score 21

JavaScript初心者のものです
配列のことで質問があります。
空白を含んだ文字列を、一つの空白を一つの配列の要素としつつ、配列にする方法はありますでしょうか?
すみません、追記します
例)
var str = "a b cdf   g"(cとdの間には空白が三つあります)
=> ["a"," ","b"," ","cdf"," "," "," ","d"]
このように、空白のみ、一つにつき一つの配列の要素としたいです。

splitを使って何度か試したのですが、うまくいきませんでした。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

var str = "a b c   d"
console.log(str.split(""))
//[ 'a', ' ', 'b', ' ', 'c', ' ', ' ', ' ', 'd' ]

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 16:50

    ありがとうございます!
    気づきませんでした....

    キャンセル

  • 2018/05/04 16:58

    もしよろしければ、追記しましたので、ご覧ください

    キャンセル

+4

解決したようですが、遠回りしているように読めたので別解を。

 String.prototype.match

まず、次の2つの関数の違いを覚えて下さい。

const string = "a b cdf   g"

console.log(JSON.stringify(string.match(/\S+|\s/g))); // ["a"," ","b"," ","cdf"," "," "," ","g"]
console.log(JSON.stringify(string.split(/\S+/))); // [""," "," ","   ",""]

split は区切り文字を削除して配列化しますが、match はマッチした文字列を全て配列化してくれます。

 String.prototype.split

ただし、split には隠された「第二の機能」が存在します。

console.log(JSON.stringify(string.split(/(\s)/)));  // ["a"," ","b"," ","cdf"," ",""," ",""," ","g"]

() でキャプチャする事でキャプチャされた値も配列の要素にしてくれます。
しかしながら、分割処理が行われる事に変わりはないので、配列の要素に空文字が含まれてしまう欠点があります。
正規表現を修正して区切る位置を変更する事で回避できますが、

console.log(JSON.stringify(string.split(/(?<=\S|\s{2})(\s)/)));  // ["a"," ","b"," ","cdf"," "," "," ","g"]

そこまで頭を使うぐらいなら、String.prototype.match の方がシンプルであろう、というのが個人的な見解です。
(※なお、(?>=pattern) は ES2018 の先行仕様なので、まだ実装が整っていません)

他に Array.prototype.filter で空文字を削除する方法もありますが、対処療法な面は否めません。

Re: Behemoth さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 19:33

    さすがthinkさん、こっちの方が良いですね。

    キャンセル

  • 2018/05/04 21:22

    遅くなりました。
    詳しいご解説をありがとうございます!
    まだまだ知らないことばかりで先が見えません...
    また、機会がありましたらよろしくおねがいいたしますm(__)m

    キャンセル

checkベストアンサー

+3

ごきげんよう

質問が曖昧だから答えが揺れると思うけど、2つだけ紹介するね。
後出しで条件足しても答えないから、もし実現出来ない時の差分は自分で考えてね。

一つ目の方法はArray.fromにぶち込む方法

var str = "a b c   d";
console.log(Array.from(str));
// ["a", " ", "b", " ", "c", " ", " ", " ", "d"]

JavaScriptのArray.fromはとても強力で、
lengthプロパティを所持していてアクセス出来るものなら何でも配列に変換できるの。
質問文以外の文字列に適用するとこんな感じの挙動になるわよ。

var str2 = "ab cd   ef";
console.log(Array.from(str2));
// ["a", "b", " ", "c", "d", " ", " ", " ", "e", "f"]

var str3 = "い ろ は   に";
console.log(Array.from(str3));
// ["い", " ", "ろ", " ", "は", " ", " ", " ", "に"]

もう一つは質問文に書いてたstr.splitを利用する方法ね。

var str = "a b c   d";
console.log(str.split(" "));
// ["a", "b", "c", "", "", "d"]

これだけじゃ要望を満たせないけど、
此処から更に加工すれば良い話よ。

そうねぇ、例えば文字列の後にスペースを補うってのはどう?

var str = "a b c   d";
var toArray = function (str) {
  var seed = str.split(" ");
  var result = [];
  for (var i = 0; i < seed.length; i++) {
    var it = seed[i];
    result.push(it);
    if (it !== "" && i < seed.length - 1) {
      result.push(" ");
    }
  }
  return result;
};
console.log(toArray(str));
// ["a", " ", "b", " ", "c", " ", "", "", "d"]

こちらも質問文以外の状況で挙動が変わるから確認してみてね。

var str2 = "ab cd   ef";
console.log(toArray(str2));
// ["ab", " ", "cd", " ", "", "", "ef"]

var str3 = "い ろ は   に";
console.log(toArray(str3));
// ["い", " ", "ろ", " ", "は", " ", "", "", "に"]

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 17:09

    こんにちは。
    ありがとうございます!
    解決しました。

    キャンセル

+3

String@@iteratorメソッドを持つ反復可能オブジェクトなので、以下のようにスプレッド構文を使うことも出来ます。

console.log([..."a b cdf   g"])
// [ 'a', ' ', 'b', ' ', 'c', 'd', 'f', ' ', ' ', ' ', 'g' ]

 参考

スプレッド構文 (※ブラウザの互換性もこちらのページで要確認)

反復処理プロトコル

String.prototype[@@iterator]()

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/04 21:21

    遅くなりました。
    ごかいとうありがとうございます!
    「スプレッド構文」というワードも恥ずかしながら知りませんでした。。。
    リンクを確認して学習に励みます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15967questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。