JavaScriptを使用して独自のipsumジェネレータを作成する

ランダムな言葉でコンテンツを生成するテストのために便利です.そういうわけで、今日、我々はそれをする機能をつくります.

Use this code to build your own Ipsum generator, so you have random generated content as much as you like 👍

必要に応じてライブラリを使用することができますが、これはとても簡単ですので、多くの行のコードで構築することができますので、それを自分で作るのはいいです.
ランダムな単語を含むコンテンツを生成するには,3つの関数とその語源を必要とする.

乱数を与える関数

ランダムな単語を与える機能

複数の単語を文字列に入れる関数

単語のソースは単語で定義された配列になります.( Get it from my Gist )

1 .乱数を生成する
ソースからランダムな単語を取得したいので、ランダムなインデックス番号を生成する必要があります.この関数を使用すると、配列の最小値と最大値を考慮しておく必要があります.

Math.random();
// Returns 0.534098468876492

With Math.random() , 0と1より小さいランダムなfloatを取得します.例えば10で乗算すると0から10までの数が得られる.しかし、この場合、0以下で数10以下の値になりたい.

Math.random() * (10 - 0) + 0;
// Returns 8.448742196214798

しかし、たった今、それはまだ浮かびます.だから私たちはMath.round 整数値を取得するには

Math.round(Math.random() * (10 - 0) + 0)
// Returns 6 or 5 or 9 or 10

この計算により、0から10までの数または10になる.それはあなたが期待することを行う場合は、迅速にテストすることができます.

let number = 0;
let steps = 0;
while(number != 10) {
    number = Math.round(Math.random() * (10 - 0) + 0);
    steps = steps + 1;
    console.log('steps', steps)
}

このコードでは、10になるまでループを実行しています.手順を追跡することで、どのように多くのラウンドが必要なことがわかります.これを実行するたびに、あなたはそれがラウンドの異なる量を必要と知っている.

function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

これは、2つの数字の間に乱数を得るために、この最終的な関数です.我々の源、配列からランダムな語を得続けましょう.


2 .ランダムワードを取得する
私はこのポストのために使用するランダムな単語の素晴らしいコレクションを見つけました.あなたはfind it on Gist . しかし、このポストでは、私はより短いバージョンを使います.

You can also define your own words in a certain theme. For example Developer Ipsum or Cupcake Ipsum

const word = [
    "Got",
    "ability",
    "shop",
    "recall",
    "fruit",
    "easy",
    "dirty",
    "giant",
    "shaking",
    "ground",
    "weather",
    "lesson",
    "almost",
    "square",
    "forward",
    "bend",
    "cold",
    "broken",
    "distant",
    "adjective."
]

我々は、使用する必要がありますrandomNumber 関数は、前の手順では、ランダムな単語を得るために作成しました.この関数では、パラメータとして最小値と最大数を指定する必要がありますこれで簡単にできます.

const word = words[randomNumber(0, words.length - 1)];

最初のパラメータは0から始まります.番目のパラメータは私たちの最大値なのでwords.length - 1 . この例では、私たちの配列はその中に20の単語を持っているので、lengthプロパティによって返されます.しかし、配列が0から数え始めるので、配列の最新の位置は19です.だからこそ私たちは- 1 .

function getRandomWord() {
    return words[randomNumber(0, words.length - 1)];
}

我々は、単語の配列からランダムな単語を得るために我々の第二の機能を持っている.


3 .ランダムな単語で文字列を取得する
今、我々は複数の単語を取得し、それを文字列にしたいので、我々はコンテンツとして我々が望むもののために使用することができます.できることは、いくつかの位置を持つ配列を生成することです.

[...Array(10)]
// Returns [undefined, undefined, ....] with 10 items

と.map メソッドは、我々は繰り返して、ランダムな言葉でそれを埋めることができます.

[...Array(10)].map(() => getRandomWord())
// Returns ["hand", "close", "ship", "possibly", "metal", "myself", "everybody", "serious", "adult", "favorite"]

ランダムな単語の配列を持っているので、.join('') .

[...Array(10)].map(() => getRandomWord()).join('')

しかし、我々は文字列にその可読性のいくらかの「感覚」を与えたいです.したがって、配列のすべての最初の単語は、大文字として最初の文字を持つべきです.更新しましょうgetRandomWord 関数.

function getRandomWord(firstLetterToUppercase = false) {
    const word = words[randomNumber(0, words.length - 1)];
    return firstLetterToUppercase ? word.charAt(0).toUpperCase() + word.slice(1) : word;
}

生成された文字列を取得する関数を生成する関数を作成します.との比較getRandomWord(i === 0) 関数を通してbooleanを与えます.

function generateWords(length = 10) {
    return [...Array(length)].map((_, i) => getRandomWord(i === 0)).join(' ').trim() + '.';
}

完了
すべてのコードを作成したので、完全なコード例をチェックする時間です.

const word = [
    "Got",
    "ability",
    "shop",
    "recall",
    "fruit",
    "easy",
    "dirty",
    "giant",
    "shaking",
    "ground",
    "weather",
    "lesson",
    "almost",
    "square",
    "forward",
    "bend",
    "cold",
    "broken",
    "distant",
    "adjective."
]

function getRandomWord(firstLetterToUppercase = false) {
    const word = words[randomNumber(0, words.length - 1)];
    return firstLetterToUppercase ? word.charAt(0).toUpperCase() + word.slice(1) : word;
}

function generateWords(length = 10) {
    return [...Array(length)].map((_, i) => getRandomWord(i === 0)).join(' ').trim() + '.';
}

function randomNumber(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

このrunkit例の関数を試してください.
https://runkit.com/devbyrayray/how-to-generate-a-string-with-random-words


ありがとう
私はあなたが何か新しいことを学んだか、この物語を読んだ後、何か新しいものを作成することに触発されて願っています!🤗 もしそうならば、電子メール(このページの最上部へスクロールする)を通して購読するか、HashNodeでここで私について来てください.

Did you know that you can create a Developer blog like this one, yourself? It's entirely for free. 👍💰🎉🥳🔥

私が質問または何かを応答として言うためにあなたを残したならば、スクロールして、私にメッセージを入力してください.あなたがそれを秘密にしたいとき、私に送ってください.私のDMは常に開いている😁